輕量級音樂播放器搭建 4
繼續未完成的事業，仍是有這個錯誤：css
我不知道爲何，可能內部執行的就是有時間差吧。因此將play()函數手動進行延遲吧，我想使用setTimeout，一開始是這麼寫的。html
watch: {
currentMusicIndex: function (newVal, oldVal) {
setTimeout(function () {
console.log(this)
this.$refs.audio.play()
}, 200)
}
}
可是又有了新的問題：vue
Uncaught TypeError: Cannot read property 'audio' of undefined
這是由於在setTimeout中，this永遠指向window（能夠查看控制檯輸出this）。因此要在setTimeout以前得到this.$refs.audio。另外這個延遲應該有多少？我試了幾個值，感受不太好掌握，有很大一部分網絡的因素。能夠將watch中觀察currentMusicIndex修改以下：vuex
watch: {
currentMusicIndex: function (newVal, oldVal) {
let audioElement = this.$refs.audio
setTimeout(function () {
console.log('開始播放音樂')
audioElement.play()
}, 20)
}
}
或者就直接不用觀察currentMusicIndex這個data，而是觀察currentMusicUrl，這樣就沒有這麼多事情了。由於必定會保證先變化url，再進行歌曲的播放。因此watch修改以下：api
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就是下圖中的地址：ide
picUrl或者是blurPicUrl均可以，這兩個是同樣的。如今的music-player.vue文件是這個樣子的：svg
<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.currentMusicUrl)