問題描述

準備用vue做一個音樂播放器，現在遇到了一點問題，先貼代碼：

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.lshqa.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返回的數據

現在的問題是，如果mp3正確讀取了，播放器應該會顯示歌曲的duration，但是現在無法讀取到duration，音樂也無法播放

這是說明mp3沒有正確讀取嗎，但是我認為自己的代碼應該沒有問題，控制臺也沒有報錯。所以問題到底處在哪里，如何才能正確加載mp3文件呢？

問題解答

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

看問題標題就忍不住吐槽，vuejs怎么讀取mp3呢？Vue只是一個mvvm框架啊，什么時候Vue也能讀取mp3文件了？你連問題是否和vue相關都沒弄明白。

你看看audio內的source是否正確得到的src屬性，如果得到了，那請不要把vuejs牽扯進問題里。因為即使你不用vue，你用react，你用jQuery，這個問題照樣出現。

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

你有沒有想過，你這樣直接偷人家網易云音樂的mp3文件，人家是否愿意給你使用呢？我沒有猜錯的話，這就是audio不能正常播放的原因。

你自己新建一個html，手寫一個audio，給上這個src當源，試一試便知道。根本不用跑到網上來問問題，然后等一兩天然后看有沒有人根據你的問題給出你答案。

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

segmentfault上問問題的人基本是遇到問題連搜索都懶得搜就跑過來提問題的人，更別想看到提的問題能夠展示出他們對問題求解的思考和努力了。。。。

audio標簽應該加一個autoplay='autoplay'

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

先看看控制臺有沒有報錯

然后看看接口返回的數據，自己用瀏覽器直接訪問一下看看

再來看看 dom 結構 看看符不符合預期

以上都沒法子的話 就在代碼里面打斷點 console.log 那些值 （用二分法）

上面都還是查不出的話 很可能是 其他問題 導致的問題 包括不限于：庫自身bug、瀏覽器問題、設備網絡問題等等 這時候應該嘗試去搜索引擎找問題解決了

上 SegmentFault