2. 技术
    3. Vue实现音乐播放效果（适合小白学习）

    Vue实现音乐播放效果（适合小白学习）

    技术2022-07-10  132

    Vue实现音乐播放效果（适合小白学习）

    播放器介绍五个html主要标签功能介绍（1）搜索（2）播放效果： 完整代码：

    播放器介绍

    总体的效果如图所示，没有加很多css特效，需要美化的小白，可以自行添加，本博客只负责介绍原理。

    五个html主要标签

    如图所示 （1）audio ：属性controls="controls"实现图一的播放效果显示 （2）img标签 （3）一个input文本框 （4）按钮 （5） 《ul》 《li》标签实现列表 （6）想要获取接口的值，我们需要用到axios

    功能介绍

    （1）搜索

    当我们点击搜索按钮时，界面就会展示搜索到的音乐内容，那么就需要用到v-model标签来获取到input里面的值，

    <input type="text" v-model="msg" placeholder="输入音乐名" /> <input type="button" value="搜索" @click="search" /> msg:"",放在Vue对象的data当中 MusicArr:[]存歌单的数组 点击事件： methods:{ search:function(){ var that=this;//再axios或许网络数据时候this变了，需要存起来才能改变MusicArr的值 axios.get("https://autumnfish.cn/search?keywords="+this.msg).then(function(response){ //console.log(response);当我们访问https://autumnfish.cn/search?keywords="+this.msg这个的时候，我们可以再浏览器按f12，观看console的值，如图所示 that.MusicArr=response.data.result.songs//我们仅仅需要歌名数组就行。 },function(err){ console.log(err); }); },

    这样我们再点击的搜索的时候，数组 MusicArr就会有值，然后通过v-for就能再界面渲染出所有搜索到的歌名啦！

    （2）播放效果：

    <ul > <li v-for="item in MusicArr" > {{item.name}} <input type="button" value="播放" @click="diplay(item.id)" /> </li> </ul>

    我们在li标签中添加按钮，并为其设置播放的效果，这里我们可以分析一波，如果想让audio播放，我们就得给一个src，那个关键如何获取每一个音乐的src呢。这里呢，因为每一首歌都有一个固定的id，因此我们通过访问https://autumnfish.cn/song/url?id="+id这个接口就可以获取到歌曲的url了（不要问为什么时这个网址，问就是因为官方提供的），最后我们通过动态渲染用：src即可

    diplay:function(id){//这里是一个含参函数 //console.log(id); var that=this; axios.get("https://autumnfish.cn/song/url?id="+id).then(function(response){ console.log(response); //that.MusicArr=response.data.result.songs that.MusicUrl=response.data.data[0].url;//这里大家可以在浏览器中查询到 },function(err){ console.log(err); });

    （3）图片的显示 这里通过https://autumnfish.cn/song/detail?ids="+id接口来实现 我们把这个接口获取的图片存在一个变量里面，在img中用 ：src=“MusicImg”，就可以渲染出效果啦！

    diplay:function(id){ //console.log(id); var that=this; /* axios.get("https://autumnfish.cn/song/url?id="+id).then(function(response){ console.log(response); //that.MusicArr=response.data.result.songs that.MusicUrl=response.data.data[0].url; },function(err){ console.log(err); });*/ axios.get("https://autumnfish.cn/song/detail?ids="+id).then(function(response){ that.MusicImg=response.data.songs[0].al.picUrl; //console.log(response.data.songs[0].al.picUrl); },function(err){ console.log(err); }); }

    点击播放的时候，图片和音频同时有效果，因为我是将两者写在diplay一个函数里面的

    完整代码：

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="vue.js"></script> </head> <body> <div id="app"> <div id="auto" > <audio :src="MusicUrl" autoplay="autoplay" controls="controls"></audio> </div> <div> <img :src="MusicImg" style="width: 200px; height: 150px;"/> </div> <input type="text" v-model="msg" placeholder="输入音乐名" /> <input type="button" value="搜索" @click="search" /> <ul > <li v-for="item in MusicArr" > {{item.name}} <input type="button" value="播放" @click="diplay(item.id)" /> </li> </ul> </div> </body> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> var vm = new Vue({ el: '#app', data: { msg:"", MusicArr:[], MusicUrl:"", MusicImg:"" }, methods:{ search:function(){ var that=this; axios.get("https://autumnfish.cn/search?keywords="+this.msg).then(function(response){ console.log(response); that.MusicArr=response.data.result.songs },function(err){ console.log(err); }); }, diplay:function(id){ //console.log(id); var that=this; axios.get("https://autumnfish.cn/song/url?id="+id).then(function(response){ console.log(response); //that.MusicArr=response.data.result.songs that.MusicUrl=response.data.data[0].url; },function(err){ console.log(err); }); axios.get("https://autumnfish.cn/song/detail?ids="+id).then(function(response){ that.MusicImg=response.data.songs[0].al.picUrl; //console.log(response.data.songs[0].al.picUrl); },function(err){ console.log(err); }); } } }); </script> </html>
    Processed: 0.011, SQL: 9