Vue demo：播放器

最新推荐文章于 2022-08-31 21:01:53 发布

原创最新推荐文章于 2022-08-31 21:01:53 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #html5

(HM)Vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用Vue.js创建一个简单的音乐播放器。通过HTML5的audio元素结合Vue的特性，实现播放、暂停、进度控制等功能。

一、音乐播放器

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div align="center" style="border: 5px skyblue solid;background-color: skyblue; height: auto;width: 500px;margin: auto;">
				<br>
				<input type="text" v-model="query" @keyup.enter="searchMusic" size="35px"/>
				<input type="button" @click="searchMusic" value="搜索"/>
				<h1 style="color: cornflowerblue;"></h1>
				<div>
					<audio ref='audio' :src="musicUrl" controls autoplay loop></audio>
				</div>
				<br>
				<div align="center" style="background-color: papayawhip;">
					<table>
						<tr v-for="(item,index) in musicList">
							<td>
								<a>
									{{ ++index }}、{{ item.name }}
									<input type="button" style="float: right;" value="▶" @click="playMusic(item.id)"/>
								</a>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<!-- 官网提供的 axios 在线地址 -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 导入开发版本的Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					query:"",
					musicList:[],
					musicUrl:""
				},
				methods:{
					searchMusic:function(){
						var that = this;
						axios.get("https://autumnfish.cn/search?keywords="+this.query)
						.then(function(response){
							// console.log(response);
							that.musicList = response.data.result.songs;
						},function(err){
							
						})
					},
					playMusic:function(musicId){
						// console.log(musicId);
						var that = this;
						axios.get("https://autumnfish.cn/song/url?id="+musicId)
						.then(function(response){
							that.musicUrl = response.data.data[0].url;
						},function(err){
							
						})
					}
				}
			})
		</script>
	</body>
</html>

结果：
在这里插入图片描述