vue中播放音乐

最新推荐文章于 2024-04-18 19:31:26 发布

weixin_30565327

最新推荐文章于 2024-04-18 19:31:26 发布

阅读量436

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/chvv/p/9683692.html

版权

第一种：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
	<div id="okk">
		<audio :src="currentSong" autoplay="" controls="" @ended="nextsong()">	</audio>
		<ul>
			<li v-for="(item,index) in songs" @click="clickHandle(index)">
				<h3>歌手:{{item.name}}====
				歌名:{{item.title}}</h3>
			</li>
		</ul>

	</div>

	<script>
		var songs=[
		{id:1,name:'杨烁 ',title:'走在乡间的小路上',src:'./audio/走在乡间的小路上.mp3'},
		{id:2,name:'杨丽',title:'笑看风云',src:'./audio/笑看风云.mp3'},
		{id:3,name:'金南玲',title:'逆流成河',src:'./audio/逆流成河.mp3'},
		{id:4,name:'齐秦',title:'狼',src:'./audio/狼.mp3'}
		]


		new Vue({
			el:'#okk',
			data:{
				songs:songs,
				currentSong:'./audio/走在乡间的小路上.mp3',
				currentIndex:0,
			},
			methods:{
				clickHandle:function (index) {
					console.log(this);
					// console.log(this.songs[index])
					this.currentSong = this.songs[index].src;
					this.currentIndex = index;  //参数为index时
					// this.currentSong = item.src;   //参数为item时
				},
				nextsong:function () {
					// alert(111);
					// alert(this.currentIndex);
					console.log(this.songs.length);
					console.log(this.currentIndex);
					if(this.currentIndex==this.songs.length-1){
						this.currentIndex=-1;
					}
					this.currentIndex++;
					console.log(this.currentIndex);
					this.currentSong = this.songs[this.currentIndex].src;

			}
		}

		})
	</script>
</body>
</html>

　第二种：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
	<div id="okk">
		<audio :src="currentSrc" autoplay="" controls="" @ended="nextsong()">	</audio>
		<ul>
			<li v-for="(item,index) in songs" @click="clickHandle(index)">
				<h3>歌手:{{item.name}}====
				歌名:{{item.title}}</h3>
			</li>
		</ul>

	</div>

	<script>
		var songs=[
		{id:1,name:'杨烁 ',title:'走在乡间的小路上',src:'./audio/走在乡间的小路上.mp3'},
		{id:2,name:'杨丽',title:'笑看风云',src:'./audio/笑看风云.mp3'},
		{id:3,name:'金南玲',title:'逆流成河',src:'./audio/逆流成河.mp3'},
		{id:4,name:'齐秦',title:'狼',src:'./audio/狼.mp3'}
		]


		new Vue({
			el:'#okk',
			data:{
				songs:songs,
				currentIndex:0,
			},
			methods:{
				clickHandle:function (index) {
					console.log(this);
					// console.log(this.songs[index])
					this.currentIndex=index;  //参数为index时
					// this.currentSong = item.src;   //参数为item时
				},
				nextsong:function () {
					// alert(111);
					// alert(this.currentIndex);
					console.log(this.songs.length);
					console.log(this.currentIndex);
					if(this.currentIndex==this.songs.length-1){
						this.currentIndex=-1;
					}
					this.currentIndex++;
					console.log(this.currentIndex);
					// this.currentSong = this.songs[this.currentIndex].src;

				}
			},
			computed:{
				// 计算数据属性，就是data里面的数据
				currentSrc(){
					return this.songs[this.currentIndex].src;
				}

			},
			created(){

			}
		})
	</script>
</body>
</html>

转载于:https://www.cnblogs.com/chvv/p/9683692.html

weixin_30565327

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中播放音乐

第一种：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"...
复制链接

扫一扫