轻量级音乐播放器搭建 4

轻量级音乐播放器搭建 4

 

继续未完成的事业，还是有这个错误：

我不知道为什么，可能内部执行的就是有时间差吧。所以将play()函数手动进行延迟吧，我想使用setTimeout，一开始是这么写的。

  watch: {
  currentMusicIndex: function (newVal, oldVal) {
    setTimeout(function () {
      console.log(this)
      this.$refs.audio.play()
   }, 200)
 }
}

但是又有了新的问题：

  
Uncaught TypeError: Cannot read property 'audio' of undefined

这是因为在setTimeout中，this永远指向window（可以查看控制台输出this）。所以要在setTimeout之前获得this.$refs.audio。另外这个延迟应该有多少？我试了几个值，感觉不太好掌握，有很大一部分网络的因素。可以将watch中观察currentMusicIndex修改如下：

  
watch: {
  currentMusicIndex: function (newVal, oldVal) {
    let audioElement = this.$refs.audio
    setTimeout(function () {
      console.log('开始播放音乐')
      audioElement.play()
   }, 20)
 }
}

或者就直接不用观察currentMusicIndex这个data，而是观察currentMusicUrl，这样就没有这么多事情了。因为一定会保证先变化url，再进行歌曲的播放。所以watch修改如下：

  
watch: {
  currentMusicUrl: function (newVal, oldVal) {
    let audioElement = this.$refs.audio
    setTimeout(function () {
      console.log('开始播放音乐')
      audioElement.play()
   }, 20)
 }
}

其中我还是加上了setTimeout，我投降，总是报错那个no support source的错误。也许模板在渲染的速度要比脚本中代码执行的慢一些。总之，添加一个延迟调用。

然后还有一个就是展示歌曲专辑封面。这个我想可以绑定或者与play()函数写在一起。因为专辑图片展示的过程就是歌曲播放的过程，歌曲进行切换的时候，专辑图片也要进行切换。所以对模板中图片的src进行以下绑定，新建data属性currentMusicPictureSrc表示专辑图片的src地址。可以找到src就是下图中的地址：

picUrl或者是blurPicUrl都可以，这两个是一样的。现在的music-player.vue文件是这个样子的：

  <template>
  <div class="music-player">
    <header-bar></header-bar>
    <div class="mid">
      <audio :src="currentMusicUrl" autoplay @ended="_playDefaultMusic(currentMusicIndex)" ref="audio"></audio>
      <img :src="currentMusicPictureSrc" class="music-album-picture">
    </div>
    <music-controller></music-controller>
  </div>
</template>
​
​
<script>
  import HeaderBar from 'components/header-bar/header-bar'
  import MusicController from 'components/music-controller/music-controller'
  import getDefaultMusicList from 'api/getDefaultMusicList'
  import {getMusicUrl} from 'api/playThisMusic'
​
  export default {
    data () {
      return {
        defaultMusicList: [],
        currentMusicUrl: '',
        currentMusicIndex: 0,
        currentMusicPictureSrc: '',
     }
   },
    components: {
      HeaderBar,
      MusicController
   },
    created () {
      console.log('MusicPlayer Created')
      this._getDefaultMusicList()
   },
    methods: {
      _getDefaultMusicList () {
        console.log('执行对默认歌单请求')
        getDefaultMusicList()
         .then((res) => {
            if (res.code === 200) {
              this.defaultMusicList = res.result
              console.log('获取到默认歌单:')
              console.log(this.defaultMusicList)
           } else {
              console.log(res.code + '---未获得默认歌单数据')
           }
         })
         .then(() => {
            this._playDefaultMusic()
         })
     },
      _playDefaultMusic () {
        if (this.currentMusicIndex === this.defaultMusicList.length - 1) {
          this.currentMusicIndex = 0
       } else {
          this.currentMusicIndex = this.currentMusicIndex + 1
       }
        getMusicUrl(this.defaultMusicList[this.currentMusicIndex].id)
         .then((res) => {
            console.log('开始获取歌曲 ' + this.defaultMusicList[this.currentMusicIndex].name + ' 播放地址')
            this.currentMusicUrl = res.data[0].url
            console.log('获取到歌曲播放地址为 ' 

转载于:https://www.cnblogs.com/liyanxiang/p/7657172.html