场景

从今日推荐页面点击某首歌曲会将这首歌曲的songid通过路由传递到播放界面，

播放界面调用百度音乐接口实现数据的获取以及音乐的播放。

效果

实现

配置路由

首先在pages目录下新建musicplay.vue作为音乐播放的页面，

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

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

来到今日推荐页面，配置页面跳转

跳转到音乐播放组件并将当前音乐的songid通过路由参数传递过去。

  <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>

同理将其他页面，要实现播放的页面组件也配置跳转到音乐播放组件，并将要播放的音乐组件的songid传递过去。

实现音乐播放界面

百度音乐API播放说明：

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

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

参数：songid = 877578 //歌曲id

注：关于使用file_link不能播放的问题，是因为百度使用Http中的Referer头字段来防止盗链，在HTML文件中

加上 <meta name=”referrer” content=”never”>这一句让发送出去的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>

实现歌词滚动功能

在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// 数据格式处理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显示歌词滚动

<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))添加监听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标签提供的获取当前播放时间的方法},_durationTime(){this.durationTime = this.$refs.player.duration// duration是audio标签提供的获得歌曲播放整体时间的方法}}

实现下载功能

百度音乐API下载说明：

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

参数： songid = 877578//歌曲id

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

_t = 1430215999,, //时间戳

我们在请求百度音乐的API后输出返回的数据可以看到

歌曲的链接为：

返回数据下的bitrate下的show_link

所以我们几将audio的src属性设为

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

所以我们点击播放组件的右边的三个点，选择下载，就可以实现下载了。

完整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标签提供的获取当前播放时间的方法},_durationTime(){this.durationTime = this.$refs.player.duration// duration是audio标签提供的获得歌曲播放整体时间的方法}}}
</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

场景

原因

百度使用Http中的Referer头字段来防止盗链，在HTML文件中加上 <meta name=”referrer” content=”never”>这一句让发送出去的Http包都不含Referer字段就行了

解决

找到index.html

加入

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

注意双引号是英文状态

此部分代码对应分阶段代码中阶段八

分阶段代码下载位置：

https://download.csdn.net/download/badao_liumang_qizhi/10846557

Vue实现仿音乐播放器11-实现访问百度音乐API实现播放音乐功能相关推荐

单片机音乐播放器课程设计C语言,单片机课程设计简易音乐播放器
单片机课程设计简易音乐播放器论文题目:简易音乐播放器所属系部:电子工程系指导教师: 学生姓名: 学号: 专业: 电子信息工程技术题目: 简易音乐播放器任务与要求:本设计以 MCS-51 系列 ...
基于Qt的网络音乐播放器（四）酷狗API接口获取歌曲的搜索列表和歌曲的播放
2020博客之星年度总评选进行中:请为74号的狗子投上宝贵的一票! 我的投票地址:点击为我投票文章目录 1.效果图 2.准备好前面获取的酷狗api接口 3.网络歌曲搜索实现 4.网络歌曲播放的实现 ...
php 在线调用音乐播放器,宅音乐播放器,HTML5网页播放器，带后台管理及API调用，使用thinkphp编写...
宅音乐播放器宅音乐播放器,HTML5网页播放器,集成后台管理及API调用,目前正在开发中,敬请关注技术栈后端:thinkphp 5.1 前端:layui 数据库:mysql 演示整合依赖安装包 ...
视频、音乐播放器大家都听说过，那么图片播放器呢
原标题:应用Tkinter模块制作一个图片播放器今天,在看视频的同时,想了一下,既然视频.音乐都有自己的播放器,那么图片呢?是否有自己的播放器呢?既然没有,为什么不做一个呢? 文章目录原标题:应用 ...
【翻】【英汉对照】【完整官方参考】Windows媒体播放器11 SDK 播放器对象模型（三）
用于脚本语言的播放器对象模型 ActiveX 采用拥有编程功能的对象概念.Windows 媒体播放器使用一些对象来划分控件提供的功能. 根对象为 Player 对象,其他对象都通过特定的属性与 Pla ...
Android开发本地及网络Mp3音乐播放器(十二)创建NetMusicListAdapter、SearchResult显示网络音乐列表
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/51290181 觉得博文有用,请点赞,请留言,请关注,谢谢!~ 实现功能: 实现NetM ...
基于Qt的音乐播放器（一）添加音频文件，播放音乐，更新进度条
2020博客之星年度总评选进行中:请为74号的狗子投上宝贵的一票! 我的投票地址:点击为我投票文章目录 1.实现音频文件对话框(QFileDialog类) 2.实现音乐播放(QMediaPlayer ...
好看的html5播放器,7 款超具个性的 HTML5 播放器
这篇文章我们要分享一些很有个性的HTML5音乐播放器和视频播放器,它们都具有播放器的大部分功能,并以HTML5和JavaScript实现.这些HTML5播放器有着非常漂亮的外观,很多你都无需自己重新定 ...
Web点播播放器1.0——腾讯sdk网页点播播放器
https://www.qcloud.com/document/product/267/5706 功能介绍本文档是介绍腾讯云视频点播服务的网页播放器(Web SDK)的使用说明,它可帮助腾讯云客户直 ...

Vue实现仿音乐播放器11-实现访问百度音乐API实现播放音乐功能

场景

效果

实现