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

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

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


当单击歌名(包括歌手下的音乐列表)时,应该跳转并携带歌曲的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字段就可以了。

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


相关文章
|
图形学
Unity——音乐、音效
Unity——音乐、音效
|
移动开发
【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停
【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停
149 0
|
监控 JavaScript 安全
一款web端的好用又好看的音乐、视频播放器-XGPlayer
视频播放器一直是Web端比较难整的功能,虽然已经有比较优秀的开源库。可以满足日常开发大部分的功能,但是在一些功能上还是不尽如人意。今天给大家介绍一款由西瓜团队开源的视频播放器。
一款web端的好用又好看的音乐、视频播放器-XGPlayer
|
Java Android开发
Android MediaPlayer 音乐播放器扫描 本地音乐、上一曲、下一曲切歌、播放本地音乐(上)
Android MediaPlayer 音乐播放器扫描 本地音乐、上一曲、下一曲切歌、播放本地音乐(上)
336 0
Android MediaPlayer 音乐播放器扫描 本地音乐、上一曲、下一曲切歌、播放本地音乐(上)
|
XML 缓存 Android开发
Android MediaPlayer 音乐播放器扫描 本地音乐、上一曲、下一曲切歌、播放本地音乐(下)
Android MediaPlayer 音乐播放器扫描 本地音乐、上一曲、下一曲切歌、播放本地音乐(下)
237 0
Android MediaPlayer 音乐播放器扫描 本地音乐、上一曲、下一曲切歌、播放本地音乐(下)
|
JSON API 数据格式
基于Qt的网络音乐播放器(四)酷狗API接口获取歌曲的搜索列表和歌曲的播放
基于Qt的网络音乐播放器(四)酷狗API接口获取歌曲的搜索列表和歌曲的播放
|
JSON Java API
基于Qt的音乐播放器(三)通过酷狗音乐的api接口,返回json格式歌曲信息(播放地址,歌词,图片)
基于Qt的音乐播放器(三)通过酷狗音乐的api接口,返回json格式歌曲信息(播放地址,歌词,图片)
1084 0
基于Qt的音乐播放器(三)通过酷狗音乐的api接口,返回json格式歌曲信息(播放地址,歌词,图片)
|
Python
Python—实现本地音乐播放器(添加/播放/暂停/下一首/上一首/音量/打开超链接)
Python—实现本地音乐播放器(添加/播放/暂停/下一首/上一首/音量/打开超链接)
796 0

热门文章

最新文章