首页 > 其他 > 详细

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

时间:2021-03-02 23:35:00      阅读:5      评论:0      收藏:0      [点我收藏+]

代码奉上:

技术分享图片
<!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

 

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

原文:https://www.cnblogs.com/3-wusen/p/14471891.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号