vue第一个项目之音乐播放器

代码奉上：

<!DOCTYPE html>
<html>
<head>
    <title>阿森音乐播放器</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
        body{
            background:#CDB7B5;
            
        }
        .class1{
            background: green;
        }
        #song{

        }
        #song audio{
            width: 100%;
            height: 10px;
        }
        .simple{
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="song">
            <audio :src="getCurrentSongSrc" @ended="ended" controls autoplay></audio>
        </div>

        <div class="simple" :class='{class1:index==currentindex}' v-for="(music,index) in musicDatas" :key='index' @click="changeMucis(index)">
            <h2>{{music.name}}</h2>
        </div>

    </div>

    <script type="text/javascript">

        const musicDatas = [{'name': '精彩最初-PiuPiuPiu（精彩最初 remix）', 'url': 'http://music.163.com/song/media/outer/url?id=1811713141.mp3', 'picUrl': 'http://p3.music.126.net/fjIymPUcRjts0VpDxxdaXQ==/109951165626452991.jpg', 'singer': '精彩最初'}, {'name': 'Piu Piu Piu', 'url': 'http://music.163.com/song/media/outer/url?id=1488780845.mp3', 'picUrl': 'http://p3.music.126.net/CXHqf3EqKOFwnf2mb8QvxQ==/109951165404753947.jpg', 'singer': '拼音师'}, {'name': '9277', 'url': 'http://music.163.com/song/media/outer/url?id=557579220.mp3', 'picUrl': 'http://p4.music.126.net/Bbrz5ewRRN0aRly1VTc4Aw==/109951163289835394.jpg', 'singer': '周晏伊'}, {'name': '舔包人之歌', 'url': 'http://music.163.com/song/media/outer/url?id=1809043899.mp3', 'picUrl': 'http://p3.music.126.net/a9lJ1jLEtgLoGG-95x0hjw==/109951165603405969.jpg', 'singer': '张老板啊'}, {'name': '错位时空 (DJ版)', 'url': 'http://music.163.com/song/media/outer/url?id=1817762859.mp3', 'picUrl': 'http://p3.music.126.net/8C0lwLE88j9ZwLyPQ9a4FA==/109951165595770076.jpg', 'singer': '艾辰'}, {'name': '错位时空', 'url': 'http://music.163.com/song/media/outer/url?id=1808492017.mp3', 'picUrl': 'http://p4.music.126.net/8C0lwLE88j9ZwLyPQ9a4FA==/109951165595770076.jpg', 'singer': '艾辰'}, {'name': '机器铃 砍菜刀', 'url': 'http://music.163.com/song/media/outer/url?id=473817665.mp3', 'picUrl': 'http://p3.music.126.net/uIOrdW8DnS-TM2UinIBwXQ==/18590542604337710.jpg', 'singer': ' 张卫'}, {'name': '9420（蔡方萌&麦小兜）', 'url': 'http://music.163.com/song/media/outer/url?id=528348555.mp3', 'picUrl': 'http://p4.music.126.net/31eVBs0uMgiKQLA5lbjixw==/109951163096638649.jpg', 'singer': '蔡方萌'}]


        new Vue({
            el:"#main",
            data:{
                musicDatas,
                currentindex:0,
                
            },
            methods:{
                changeMucis:function(index){
                    this.currentindex = index
                },
                ended:function(){                    
                    if (this.currentindex<this.musicDatas.length-1) {
                        this.currentindex += 1
                    }else{
                        this.currentindex =0
                    }
                },
                
            },
            computed:{
                getCurrentSongSrc(){
                    return this.musicDatas[this.currentindex].url
                }
            }
        })
    </script>
</body>
</html>
View Code

 

posted @ 2021-03-02 22:53  3ξ  阅读(97)  评论(0)  编辑  收藏  举报