音乐播放器项目-歌曲播放

简介: 音乐播放器项目-歌曲播放

音乐播放器项目-歌曲播放


当单击歌名(包括歌手下的音乐列表)时,应该跳转并携带歌曲的songid值到歌曲播放页面,以便播放对应的歌曲。创建歌曲播放页面MusicPlay.vue,并且进行路由配置,代码如下:

我们单击的音乐列表所在的页面是MusicList.vue和SingerMusicList.vue,要想单击音乐跳转到播放页面就需要把li 替换成路由跳转标签router-link ,并且携带歌曲songid值到歌曲播放页面,代码如下:

这样我们在单击任意一首歌时都能跳转到歌曲播放页面,并能成功地接收歌曲id值。在MusicPlay.vue页面,根据得到的动态歌曲id值可访问百度音乐歌曲接口,从而获取歌曲进而播放,代码如下:

这样我们在单击任意一首歌时都能跳转到歌曲播放页面,并能成功地接收歌曲id值。在MusicPlay.vue页面,根据得到的动态歌曲id值可访问百度音乐歌曲接口,从而获取歌曲进而播放,代码如下:

注意:关于使用file_link不能播放的问题,是因为百度使用Http中的Referer头字段来防止盗链,在index.html文件中加上meta name="referrer"content="never置,代码如下:

我们单击的音乐列表所在的页面是MusicList.vue和SingerMusicList.vue,要想单击音乐跳转到播放页面就需要把li 替换成路由跳转标签router-link ,并且携带歌曲songid值到歌曲播放页面,代码如下:

这样我们在单击任意一首歌时都能跳转到歌曲播放页面,并能成功地接收歌曲id值。在MusicPlay.vue页面,根据得到的动态歌曲id值可访问百度音乐歌曲接口,从而获取歌曲进而播放,代码如下:

注意:关于使用file_link不能播放的问题,是因为百度使用Http中的Referer头字段来防止盗链,在index.html文件中加上meta name="referrer"content="never"这一句让发送出去的Http包都不含Referer字段就可以了。

数据加载完毕后,渲染歌曲播放页面,并加入一些阿里巴巴矢量图标,代码如下:


相关文章
|
6月前
uniapp制作录音播放功能
uniapp制作录音播放功能
216 0
|
6月前
|
小程序 JavaScript 前端开发
微信小程序的音频视屏播放
微信小程序的音频视屏播放
110 0
|
11月前
|
图形学
Unity——音乐、音效
Unity——音乐、音效
|
移动开发
【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停
【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停
145 0
|
监控 JavaScript 安全
一款web端的好用又好看的音乐、视频播放器-XGPlayer
视频播放器一直是Web端比较难整的功能,虽然已经有比较优秀的开源库。可以满足日常开发大部分的功能,但是在一些功能上还是不尽如人意。今天给大家介绍一款由西瓜团队开源的视频播放器。
一款web端的好用又好看的音乐、视频播放器-XGPlayer
|
前端开发 数据可视化 Android开发
autojs音乐动效
牙叔教程 简单易懂
298 0
|
JSON Java API
基于Qt的音乐播放器(三)通过酷狗音乐的api接口,返回json格式歌曲信息(播放地址,歌词,图片)
基于Qt的音乐播放器(三)通过酷狗音乐的api接口,返回json格式歌曲信息(播放地址,歌词,图片)
1066 0
基于Qt的音乐播放器(三)通过酷狗音乐的api接口,返回json格式歌曲信息(播放地址,歌词,图片)
|
JSON API 数据格式
基于Qt的网络音乐播放器(四)酷狗API接口获取歌曲的搜索列表和歌曲的播放
基于Qt的网络音乐播放器(四)酷狗API接口获取歌曲的搜索列表和歌曲的播放
基于Qt的网络音乐播放器(四)酷狗API接口获取歌曲的搜索列表和歌曲的播放
基于Qt的音乐播放器(一)添加音频文件,播放音乐,更新进度条
基于Qt的音乐播放器(一)添加音频文件,播放音乐,更新进度条
基于Qt的音乐播放器(一)添加音频文件,播放音乐,更新进度条