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

Vue实现音乐播放效果（适合小白学习）播放器介绍五个html主要标签功能介绍（1）搜索（2）播放效果：完整代码：播放器介绍总体的效果如图所示，没有加很多css特效，需要美化的小白，可以自行添加，本博客只负责介绍原理。五个html主要标签如图所示（1）audio：属性controls="controls"实现图一的播放效果显示（2）img标签（3）一个input文本框（4）按钮（5）《ul》《li》

William_Tao（攻城狮）

5500人浏览 · 2020-07-01 11:48:46

William_Tao（攻城狮） · 2020-07-01 11:48:46 发布

播放器介绍

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^