轻量级音乐播放器搭建 4
Posted 虚几
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轻量级音乐播放器搭建 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(\'获取到歌曲播放地址为 \' + this.