Vue实现简单的音乐播放器

沐小侠

已于 2022-09-18 18:49:09 修改

阅读量2.2k

点赞数 7

分类专栏： Vue.js 文章标签： vue

于 2020-12-17 09:15:03 首次发布

本文链接：https://blog.csdn.net/weixin_41092938/article/details/111307915

版权

Vue.js 专栏收录该内容

26 篇文章 7 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>音乐播放器</title>
    <style>
        *{
            margin-left: 0px;
            padding-left: 0px;
        }
        ul li{
            list-style: none;
            line-height: 30px;
            color:#999999;
        }
        ul li.active{
            background-color: indianred;
            color: #FFFFFF;
        }
        audio{
            width: 100%;
        }
    </style>
</head>
<body>
<div id="music">
    <!--@ended事件，当媒体播放完成 会自动调用该方法，执行该脚本，自动播放下一首-->
    <audio :src="musicData[currentIndex].songSrc" controls autoplay @ended = 'nextHanlder'></audio>
    <ul>
        <!-- 循环歌名，展示 -->
        <li @click = 'songHandler(index)' v-for = '(item,index) in musicData' :key="item.id" :class = '{active:index===currentIndex}'>
           {{item.id}}.{{ item.author }}-{{ item.name }}
        </li>
    </ul>
</div>
<script src="js/vue.js"></script>
<script>
    var musicData = [
        {
	        id: 1,
	        name: '遇见',
	        author: '孙燕姿',
	        songSrc: 'static/孙燕姿 - 遇见.mp3'
        },
        {
            id: 2,
            name: '斑马，斑马',
            author: '宋冬野',
            songSrc: 'static/宋冬野 - 斑马，斑马.mp3'
        },
        {
            id: 3,
            name: '夜空中最亮的星',
            author: '逃跑计划',
            songSrc: 'static/逃跑计划 - 夜空中最亮的星.mp3'
        },
        {
            id: 4,
            name: '匆匆那年',
            author: '王菲',
            songSrc: 'static/王菲 - 匆匆那年.mp3'
        }
    ];
    new Vue({
        el: '#music',
        data() {
            return {
                musicData:[],
                currentIndex:0
            }
        },
        methods:{
            //点击那首歌播放哪一首
            songHandler(i){
                this.currentIndex = i;
            },
            //播放下一首
            nextHanlder(){
                this.currentIndex++;
            }
        },
        created(){
           //赋值变量
            this.musicData = musicData
        }
    })
</script>
</body>
</html>