vuejs无法读取mp3文件的信息

Question

准备用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="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文件呢？

Answer 1

遇到bug，有一种分析法，叫去除不相干因素法，留下最小可复现bug的必要条件。

Vue只是一个mvvm框架，和读取mp3无关。

你看看audio内的source是否正确得到的src属性，如果得到了，那就排除掉vuejs的关系。因为即使你不用vue，你用react，你用jQuery，这个问题照样出现。

既然知道和vue不相干，为什么不写个demo，仅仅留下audio标签，来试试这个mp3是否能正确播放呢？

你这样直接使用网易云音乐的mp3资源，是一种“盗链”行为。我没有猜错的话，这就是audio不能正常播放的原因，网易CDN资源服务器上有防盗链措施。

Answer 2

audio标签应该加一个autoplay="autoplay"

Answer 3

光看代码看不出问题。不过建议先去chrome调试工具里看看dom结构，看看vue编译之后的dom是否正常，其次就是去network，看是不是有下载mp3。

Answer 4

1. 先看看控制台有没有报错

2. 然后看看接口返回的数据，自己用浏览器直接访问一下看看

3. 再来看看 dom 结构 看看符不符合预期

4. 以上都没法子的话 就在代码里面打断点 console.log 那些值 （用二分法）

5. 上面都还是查不出的话 很可能是 其他问题 导致的问题 包括不限于：库自身bug、浏览器问题、设备网络问题等等 这时候应该尝试去搜索引擎找问题解决了

6. 上 SegmentFault

Answer 5

题主最后是怎么解决的，试了好多次duration都是返回NaN,求解不胜感激