場(chǎng)景

從今日推薦頁面點(diǎn)擊某首歌曲會(huì)將這首歌曲的songid通過路由傳遞到播放界面，

播放界面調(diào)用百度音樂接口實(shí)現(xiàn)數(shù)據(jù)的獲取以及音樂的播放。

效果

實(shí)現(xiàn)

配置路由

首先在pages目錄下新建musicplay.vue作為音樂播放的頁面，

然后在router下的index.js中中配置路由。

? routes: [{path:"/musicplay",name:"MusicPlay",component:MusicPlay},

來到今日推薦頁面，配置頁面跳轉(zhuǎn)

跳轉(zhuǎn)到音樂播放組件并將當(dāng)前音樂的songid通過路由參數(shù)傳遞過去。

<div class="scroller"><router-link tag="div" :to="{name:'MusicPlay',params:{songid:item.song_id}}" class="card url" v-for="(item,index) in todayRecommend" :key="index"><div class="album"><img :src="item.pic_big" :alt="item.title"><div class="name">{{ item.title }}</div></div></router-link></div>

?

同理將其他頁面，要實(shí)現(xiàn)播放的頁面組件也配置跳轉(zhuǎn)到音樂播放組件，并將要播放的音樂組件的songid傳遞過去。

?

實(shí)現(xiàn)音樂播放界面

百度音樂API播放說明：

例：method=baidu.ting.song.play&songid=877578

例：method=baidu.ting.song.playAAC&songid=877578

參數(shù)：songid = 877578 //歌曲id

注：關(guān)于使用file_link不能播放的問題，是因?yàn)榘俣仁褂肏ttp中的Referer頭字段來防止盜鏈，在HTML文件中

加上 <meta name=”referrer” content=”never”>這一句讓發(fā)送出去的Http包都不含Referer字段

來到musicplay.vue

CSS樣式

<style scoped>.header{padding:15px; }.music-info{flex: 1;font-size: 20px; }.title{display: flex;text-align: center; }.left{font-size: 30px; }.ca{color: red; }.right{font-size: 30px; }.song-info{padding: 15px; }.song-info-img{text-align: center; }.song-info-img img{width: 50%;border-radius: 5px;box-shadow: 0 0 10px 0 rgba(50,50,50,.31); }.song-lrc{margin-top: 10px;min-height: 50px; }.iconbox{display: flex;margin-top: 30px; }.iconbox .box{flex: 1; }.song{width: 100%;text-align: center; }.song audio{width: 80%; }.active{color: #222; }.author{font-size: 12px;color: #999; }</style>

頁面布局

<template lang="html"><div class="play"><div class="header"><div class="title"><router-link to="/"><i class="iconfont icon-shouye left"></i></router-link><div class="music-info"><p>{{ currentUrl.songinfo.title }}</p><p class="author">{{ currentUrl.songinfo.author }}</p></div><router-link to="/search"><i class="iconfont icon-sousuo right"></i></router-link></div></div><div class="song-info"><div class="song-info-img"><img :src="currentUrl.songinfo.pic_big"><LRC :durationTime="durationTime" :currentTime="currentTime" :songid="this.$route.params.songid"/></div><div class="iconbox"><i class="iconfont icon-shoucang2 left"></i><i class="box"></i><i class="iconfont icon-xiazai right"></i></div></div><div class="song"><audio ref="player" :src="currentUrl.bitrate.show_link" controls autoplay></audio></div></div> </template>

實(shí)現(xiàn)歌詞滾動(dòng)功能

在components目錄下新建LRC.vue<template lang="html"><div class="lrcContainer"><div class="lrc" ref="lrc">{{ getAllKey }}<pclass="lrc-p":class="{active:parseInt(currentTime) >= keyArr[index] && parseInt(currentTime) < keyArr[index+1]}"v-for="(item,key,index) in lrcData":key="index">{{ item }}{{ srcollLrc(key,index) }}</p></div></div> </template><script> export default {name:"lrc",data(){return{lrc:{},lrcData:{},keyArr:[]}},props:{songid:{type:[String,Number],default:""},currentTime:{type:[String,Number],default:0},durationTime:{type:[String,Number],default:0}},mounted(){const LRCUrl = this.HOST+"/v1/restserver/ting?method=baidu.ting.song.lry&songid="+this.songid;this.$axios.get(LRCUrl).then(res => {this.lrc = res.data// 數(shù)據(jù)格式處理var lyrics = res.data.lrcContent.split("\n");var lrcObj = {};for(var i = 0 ;i<lyrics.length;i++){var lyric = decodeURIComponent(lyrics[i]);var timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g;var timeRegExpArr = lyric.match(timeReg);if(!timeRegExpArr)continue;var clause = lyric.replace(timeReg,'');for(var k = 0,h = timeRegExpArr.length;k < h;k++) {var t = timeRegExpArr[k];var min = Number(String(t.match(/\[\d*/i)).slice(1)),sec = Number(String(t.match(/\:\d*/i)).slice(1));var time = min * 60 + sec;lrcObj[time] = clause;}}this.lrcData = lrcObj;}).catch(error => {console.log(error);})},computed:{getAllKey(){for(var i in this.lrcData){this.keyArr.push(i);}}},methods:{srcollLrc(key,index){const lrcDiv = this.$refs.lrcif(key < this.currentTime && key > this.currentTime - (this.keyArr[index+1] - this.keyArr[index])){lrcDiv.style.top = -((index-2)*30)+"px"}}} } </script><style scoped>.lrcContainer{width: 100%;height: 150px;overflow: hidden;position: relative; }.lrc{width: 100%;position: absolute;top: 0; } .active{color: red !important; } .lrc-p{height: 30px;line-height: 30px; }.up30{margin-top: -30px; }</style>

在musicplay.vue顯示歌詞滾動(dòng)

<div class="song-info-img"><img :src="currentUrl.songinfo.pic_big"><LRC :durationTime="durationTime" :currentTime="currentTime" :songid="this.$route.params.songid"/></div>

在musicplay.vue異步操作

// 異步操作 const LRC = Vue.component("lrc",(resolve)=>require(["../components/LRC"],resolve))添加監(jiān)聽methods:{addEventListeners(){this.$refs.player.addEventListener('timeupdate', this._currentTime),this.$refs.player.addEventListener('canplay', this._durationTime)},removeEventListeners: function () {this.$refs.player.removeEventListener('timeupdate', this._currentTime)this.$refs.player.removeEventListener('canplay', this._durationTime)},_currentTime(){this.currentTime = this.$refs.player.currentTime// currentTime是audio標(biāo)簽提供的獲取當(dāng)前播放時(shí)間的方法},_durationTime(){this.durationTime = this.$refs.player.duration// duration是audio標(biāo)簽提供的獲得歌曲播放整體時(shí)間的方法}}

實(shí)現(xiàn)下載功能

百度音樂API下載說明：

例：method=baidu.ting.song.downWeb&songid=877578&bit=24&_t=1393123213

參數(shù)： songid = 877578//歌曲id

bit = 24, 64, 128, 192, 256, 320 ,flac//碼率

_t = 1430215999,, //時(shí)間戳

我們?cè)谡?qǐng)求百度音樂的API后輸出返回的數(shù)據(jù)可以看到

歌曲的鏈接為：

返回?cái)?shù)據(jù)下的bitrate下的show_link

所以我們幾將audio的src屬性設(shè)為

? <div class="song"><audio ref="player" :src="currentUrl.bitrate.show_link" controls autoplay></audio></div>

所以我們點(diǎn)擊播放組件的右邊的三個(gè)點(diǎn)，選擇下載，就可以實(shí)現(xiàn)下載了。

完整musicplay.vue代碼

<template lang="html"><div class="play"><div class="header"><div class="title"><router-link to="/"><i class="iconfont icon-shouye left"></i></router-link><div class="music-info"><p>{{ currentUrl.songinfo.title }}</p><p class="author">{{ currentUrl.songinfo.author }}</p></div><router-link to="/search"><i class="iconfont icon-sousuo right"></i></router-link></div></div><div class="song-info"><div class="song-info-img"><img :src="currentUrl.songinfo.pic_big"><LRC :durationTime="durationTime" :currentTime="currentTime" :songid="this.$route.params.songid"/></div><div class="iconbox"><i class="iconfont icon-shoucang2 left"></i><i class="box"></i><i class="iconfont icon-xiazai right"></i></div></div><div class="song"><audio ref="player" :src="currentUrl.bitrate.show_link" controls autoplay></audio></div></div> </template><script>import Vue from "vue" import "../assets/font/iconfont.css" // import LRC from "../components/LRC" // 異步操作 const LRC = Vue.component("lrc",(resolve)=>require(["../components/LRC"],resolve))export default {name:"musicplay",data(){return{currentUrl:{songinfo:{title:"",author:""},bitrate:{show_link:""}},currentTime:0,durationTime:0}},components:{LRC},mounted(){const playUrl = this.HOST+"/v1/restserver/ting?method=baidu.ting.song.play&songid=" + this.$route.params.songid;this.$axios.get(playUrl).then(res => {this.currentUrl = res.data;}).catch(error => {console.log(error);})this.addEventListeners();},beforeDestroyed(){this.removeEventListeners();},methods:{addEventListeners(){this.$refs.player.addEventListener('timeupdate', this._currentTime),this.$refs.player.addEventListener('canplay', this._durationTime)},removeEventListeners: function () {this.$refs.player.removeEventListener('timeupdate', this._currentTime)this.$refs.player.removeEventListener('canplay', this._durationTime)},_currentTime(){this.currentTime = this.$refs.player.currentTime// currentTime是audio標(biāo)簽提供的獲取當(dāng)前播放時(shí)間的方法},_durationTime(){this.durationTime = this.$refs.player.duration// duration是audio標(biāo)簽提供的獲得歌曲播放整體時(shí)間的方法}}} </script><style scoped>.header{padding:15px; }.music-info{flex: 1;font-size: 20px; }.title{display: flex;text-align: center; }.left{font-size: 30px; }.ca{color: red; }.right{font-size: 30px; }.song-info{padding: 15px; }.song-info-img{text-align: center; }.song-info-img img{width: 50%;border-radius: 5px;box-shadow: 0 0 10px 0 rgba(50,50,50,.31); }.song-lrc{margin-top: 10px;min-height: 50px; }.iconbox{display: flex;margin-top: 30px; }.iconbox .box{flex: 1; }.song{width: 100%;text-align: center; }.song audio{width: 80%; }.active{color: #222; }.author{font-size: 12px;color: #999; }</style>

解決Referrer Policy: no-referrer-when-downgrade

場(chǎng)景

原因

百度使用Http中的Referer頭字段來防止盜鏈，在HTML文件中加上 <meta name=”referrer” content=”never”>這一句讓發(fā)送出去的Http包都不含Referer字段就行了

解決

找到index.html

加入

<meta name="referrer" content="never">

注意雙引號(hào)是英文狀態(tài)

總結(jié)

以上是生活随笔為你收集整理的Vue实现访问百度音乐API实现播放音乐功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。