問題描述

準(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://m.4tl426be.cn/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文件呢？

問題解答

遇到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ì)問題求解的思考和努力了。。。。

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

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

先看看控制臺(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