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

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

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


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

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


相关文章
|
4月前
uniapp制作录音播放功能
uniapp制作录音播放功能
75 0
|
4月前
|
小程序 JavaScript 前端开发
微信小程序的音频视屏播放
微信小程序的音频视屏播放
42 0
|
4月前
|
图形学
Unity——音乐、音效
Unity——音乐、音效
|
11月前
|
移动开发
【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停
【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停
108 0
|
Java Android开发
Android MediaPlayer 音乐播放器扫描 本地音乐、上一曲、下一曲切歌、播放本地音乐(上)
Android MediaPlayer 音乐播放器扫描 本地音乐、上一曲、下一曲切歌、播放本地音乐(上)
275 0
Android MediaPlayer 音乐播放器扫描 本地音乐、上一曲、下一曲切歌、播放本地音乐(上)
|
XML 缓存 Android开发
Android MediaPlayer 音乐播放器扫描 本地音乐、上一曲、下一曲切歌、播放本地音乐(下)
Android MediaPlayer 音乐播放器扫描 本地音乐、上一曲、下一曲切歌、播放本地音乐(下)
172 0
Android MediaPlayer 音乐播放器扫描 本地音乐、上一曲、下一曲切歌、播放本地音乐(下)
|
API Android开发
autojs播放在线音乐的方法
用webview播放, 或者拦截跳转真实链接下载播放
534 0
|
编解码 数据安全/隐私保护 Android开发
|
JSON API 数据格式
基于Qt的网络音乐播放器(四)酷狗API接口获取歌曲的搜索列表和歌曲的播放
基于Qt的网络音乐播放器(四)酷狗API接口获取歌曲的搜索列表和歌曲的播放
基于Qt的网络音乐播放器(四)酷狗API接口获取歌曲的搜索列表和歌曲的播放
|
JSON Java API
基于Qt的音乐播放器(三)通过酷狗音乐的api接口,返回json格式歌曲信息(播放地址,歌词,图片)
基于Qt的音乐播放器(三)通过酷狗音乐的api接口,返回json格式歌曲信息(播放地址,歌词,图片)
基于Qt的音乐播放器(三)通过酷狗音乐的api接口,返回json格式歌曲信息(播放地址,歌词,图片)

热门文章

最新文章