問(wèn)題描述

準(zhǔn)備用vue做一個(gè)音樂(lè)播放器，現(xiàn)在遇到了一點(diǎn)問(wè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.baoyu77737.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)在的問(wèn)題是，如果mp3正確讀取了，播放器應(yīng)該會(huì)顯示歌曲的duration，但是現(xiàn)在無(wú)法讀取到duration，音樂(lè)也無(wú)法播放

這是說(shuō)明mp3沒(méi)有正確讀取嗎，但是我認(rèn)為自己的代碼應(yīng)該沒(méi)有問(wèn)題，控制臺(tái)也沒(méi)有報(bào)錯(cuò)。所以問(wèn)題到底處在哪里，如何才能正確加載mp3文件呢？

問(wèn)題解答

遇到bug，有一種分析法，叫去除不相干因素法，留下最小可復(fù)現(xiàn)bug的必要條件。

看問(wèn)題標(biāo)題就忍不住吐槽，vuejs怎么讀取mp3呢？Vue只是一個(gè)mvvm框架啊，什么時(shí)候Vue也能讀取mp3文件了？你連問(wèn)題是否和vue相關(guān)都沒(méi)弄明白。

你看看audio內(nèi)的source是否正確得到的src屬性，如果得到了，那請(qǐng)不要把vuejs牽扯進(jìn)問(wèn)題里。因?yàn)榧词鼓悴挥胿ue，你用react，你用jQuery，這個(gè)問(wèn)題照樣出現(xiàn)。

既然知道和vue不相干，為什么不寫(xiě)個(gè)demo，僅僅留下audio標(biāo)簽，來(lái)試試這個(gè)mp3是否能正確播放呢？遇到問(wèn)題要做一個(gè)行動(dòng)派，嗯，是指努力定位問(wèn)題，不是指稀里糊涂就跑到seg上問(wèn)問(wèn)題。你問(wèn)問(wèn)題可以，至少讓回答的人看到，你為這個(gè)問(wèn)題努力了，實(shí)在能力有限，為此困擾。

你有沒(méi)有想過(guò)，你這樣直接偷人家網(wǎng)易云音樂(lè)的mp3文件，人家是否愿意給你使用呢？我沒(méi)有猜錯(cuò)的話，這就是audio不能正常播放的原因。

你自己新建一個(gè)html，手寫(xiě)一個(gè)audio，給上這個(gè)src當(dāng)源，試一試便知道。根本不用跑到網(wǎng)上來(lái)問(wèn)問(wèn)題，然后等一兩天然后看有沒(méi)有人根據(jù)你的問(wèn)題給出你答案。

=============

segmentfault上問(wèn)問(wèn)題的人基本是遇到問(wèn)題連搜索都懶得搜就跑過(guò)來(lái)提問(wèn)題的人，更別想看到提的問(wèn)題能夠展示出他們對(duì)問(wèn)題求解的思考和努力了。。。。

audio標(biāo)簽應(yīng)該加一個(gè)autoplay='autoplay'

光看代碼看不出問(wèn)題。不過(guò)建議先去chrome調(diào)試工具里看看dom結(jié)構(gòu)，看看vue編譯之后的dom是否正常，其次就是去network，看是不是有下載mp3。

先看看控制臺(tái)有沒(méi)有報(bào)錯(cuò)

然后看看接口返回的數(shù)據(jù)，自己用瀏覽器直接訪問(wèn)一下看看

再來(lái)看看 dom 結(jié)構(gòu) 看看符不符合預(yù)期

以上都沒(méi)法子的話 就在代碼里面打斷點(diǎn) console.log 那些值 （用二分法）

上面都還是查不出的話 很可能是 其他問(wèn)題 導(dǎo)致的問(wèn)題 包括不限于：庫(kù)自身bug、瀏覽器問(wèn)題、設(shè)備網(wǎng)絡(luò)問(wèn)題等等 這時(shí)候應(yīng)該嘗試去搜索引擎找問(wèn)題解決了

上 SegmentFault