javascript - vuejs無法讀取mp3文件的信息
問題描述
準(zhǔn)備用vue做一個(gè)音樂播放器,現(xiàn)在遇到了一點(diǎn)問題,先貼代碼:
main.js部分:
const store = new Vuex.Store({ state: { songList: [{ name: ’For You’, id: ’28001046’, duration: ’03:18’, arname: ’Madeon’ }] }}
player.vue部分
<audio ref='player' @canplay='musicTime' @ended='ended' id='v-player-music'> <source :src='http://www.intensediesel.com/wenda/mp3Url'></audio>export default { data () { return { mp3Url: ’’ } }, created: function () { this.axios.get(’http://localhost:3000/music/url?id=’ + this.$store.state.songList[0].id).then(res => { this.mp3Url = res.data.data[0].url; }); }}
(以上代碼只選取了有用的部分)
下面是api返回的數(shù)據(jù)
現(xiàn)在的問題是,如果mp3正確讀取了,播放器應(yīng)該會(huì)顯示歌曲的duration,但是現(xiàn)在無法讀取到duration,音樂也無法播放
這是說明mp3沒有正確讀取嗎,但是我認(rèn)為自己的代碼應(yīng)該沒有問題,控制臺(tái)也沒有報(bào)錯(cuò)。所以問題到底處在哪里,如何才能正確加載mp3文件呢?
問題解答
回答1:遇到bug,有一種分析法,叫去除不相干因素法,留下最小可復(fù)現(xiàn)bug的必要條件。
看問題標(biāo)題就忍不住吐槽,vuejs怎么讀取mp3呢?Vue只是一個(gè)mvvm框架啊,什么時(shí)候Vue也能讀取mp3文件了?你連問題是否和vue相關(guān)都沒弄明白。
你看看audio內(nèi)的source是否正確得到的src屬性,如果得到了,那請(qǐng)不要把vuejs牽扯進(jìn)問題里。因?yàn)榧词鼓悴挥胿ue,你用react,你用jQuery,這個(gè)問題照樣出現(xiàn)。
既然知道和vue不相干,為什么不寫個(gè)demo,僅僅留下audio標(biāo)簽,來試試這個(gè)mp3是否能正確播放呢?遇到問題要做一個(gè)行動(dòng)派,嗯,是指努力定位問題,不是指稀里糊涂就跑到seg上問問題。你問問題可以,至少讓回答的人看到,你為這個(gè)問題努力了,實(shí)在能力有限,為此困擾。
你有沒有想過,你這樣直接偷人家網(wǎng)易云音樂的mp3文件,人家是否愿意給你使用呢?我沒有猜錯(cuò)的話,這就是audio不能正常播放的原因。
你自己新建一個(gè)html,手寫一個(gè)audio,給上這個(gè)src當(dāng)源,試一試便知道。根本不用跑到網(wǎng)上來問問題,然后等一兩天然后看有沒有人根據(jù)你的問題給出你答案。
=============
segmentfault上問問題的人基本是遇到問題連搜索都懶得搜就跑過來提問題的人,更別想看到提的問題能夠展示出他們對(duì)問題求解的思考和努力了。。。。
回答2:audio標(biāo)簽應(yīng)該加一個(gè)autoplay='autoplay'
回答3:光看代碼看不出問題。不過建議先去chrome調(diào)試工具里看看dom結(jié)構(gòu),看看vue編譯之后的dom是否正常,其次就是去network,看是不是有下載mp3。
回答4:先看看控制臺(tái)有沒有報(bào)錯(cuò)
然后看看接口返回的數(shù)據(jù),自己用瀏覽器直接訪問一下看看
再來看看 dom 結(jié)構(gòu) 看看符不符合預(yù)期
以上都沒法子的話 就在代碼里面打斷點(diǎn) console.log 那些值 (用二分法)
上面都還是查不出的話 很可能是 其他問題 導(dǎo)致的問題 包括不限于:庫自身bug、瀏覽器問題、設(shè)備網(wǎng)絡(luò)問題等等 這時(shí)候應(yīng)該嘗試去搜索引擎找問題解決了
上 SegmentFault
相關(guān)文章:
1. docker-compose中volumes的問題2. mysql 一個(gè)sql 返回多個(gè)總數(shù)3. CSS3 畫如下圖形4. 在mac下出現(xiàn)了兩個(gè)docker環(huán)境5. 如何用筆記本上的apache做微信開發(fā)的服務(wù)器6. angular.js - ionic2 瀏覽器跨域問題7. javascript - 螞蟻金服里的react Modal方法,是怎么把元素插入到頁面最后的8. android - rxjava merge 返回Object對(duì)象數(shù)據(jù)如何緩存9. docker 下面創(chuàng)建的IMAGE 他們的 ID 一樣?這個(gè)是怎么回事????10. python - Scrapy存在內(nèi)存泄漏的問題。
