播放器介绍

总体的效果如图所示，没有加很多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.songsthat.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.songsthat.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.songsthat.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>

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

vue引入音乐播放器插件
欢迎大家进群,一起探讨学习微信公众号,每天给大家提供技术干货博主技术笔记博主网站地址1 博主网站地址2 博主开源微服架构前后端分离技术博客项目源码地址,欢迎各位star vue引入音乐播放器插件 ...
北京python培训班价格-北京Python培训班，为什么Python超适合小白学习
原标题:北京Python培训班,为什么Python超适合小白学习每次在网上看到小白提问:零基础学编程,哪门编程语言更容易上手? 其实这个问题有两种回答,一是多去试试,常见的语言只有那么几种,挨个试 ...
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档 java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S ...
java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署 ...
JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库本源码技术栈 ...
python中小学生编程学习-推荐几个适合小白学习Python的免费网站
9gd少儿编程网-Scratch_Python_教程_免费儿童编程学习平台想要学好python,只靠看Python相关的书籍是远远不够的!互联网时代,我们还要充分利用网络上的免费资源,不然怎样成为一 ...
python自学网站免费-推荐几个适合小白学习Python的免费网站
9gd少儿编程网-Scratch_Python_教程_免费儿童编程学习平台想要学好python,只靠看Python相关的书籍是远远不够的!互联网时代,我们还要充分利用网络上的免费资源,不然怎样成为一 ...
Java和vue实现音乐播放器_躁！DJ 风格 Java 桌面音乐播放器
本文适合有 Java 基础知识的人群,跟着本文可学习和运行 Java 版桌面 DJ 音乐播放器. 本文作者:HelloGitHub-秦人 HelloGitHub 推出的<讲解开源项目>系列 ...
Nodejs+express+vue在线音乐播放器网站
在线音乐网站是一款多功能的音乐播放网站,本网站适用于各种音乐分享和推广平台,支持在线音乐播放试听,支持个人的音乐收藏,丰富的音乐和图片资源,是整个网站美观多彩,方便管理员的管理和信息维护,界面友好,操 ...

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