1 首先建一个文件夹 放几首歌曲

2 看代码

1）基本版本

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>音乐播放器</title>

    <meta name="viewport" content="width=device-width ,initial-scale=1">

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        ul {

            list-style: none;

        }

        ul li {

            margin: 20px 20px;

            padding: 10px 5px;

            border-radius: 3px;

        }

        ul li.active {

            background-color: gray;

        }

    </style>

</head>

<body>

<div id="app">
　　　　　　　　<!--handerEnded这首歌播放完就波下一曲-->
    <audio v-bind:src="currentSrc" controls autoplay @ended="handerEnded"></audio>

    <ul>

        <li :class="{active:index===currentIndex}" v-for="(item, index) in musicData" :key="item.id"

            @click="handerClick(item.songSrc,index)">

            <h2>{{item.id}}-歌名：{{item.name}}</h2>

            <p>{{item.author}}</p>

        </li>

    </ul>

    <button @click="nextSong">下一曲</button>

</div>

<script>

    const musicData = [{

        id: 1,

        name: '数到五答应我 - 曹格',

        author: '曹格',

        songSrc: './static/数到五答应我 - 曹格.mp3'

    },

        {

            id: 2,

            name: '风吹着我向你跑来 - 焦迈奇',

            author: '焦迈奇',

            songSrc: './static/风吹着我向你跑来 - 焦迈奇.mp3'

        }

    ];

    let app = new Vue({

        el: '#app',

        data: {

            musicData: musicData,   // 可以写成 因为是一样的 musicData

            currentSrc: './static/数到五答应我 - 曹格.mp3',

            currentIndex: 0

        },

        methods: {

            handerClick(src, index) {

                // 更改src意味着 currentSrc = 你点的那个li标签里的歌曲的src

                // 可以把songcrc传进去

                this.currentSrc = src;

                this.currentIndex = index

            },

            handerEnded() {

                // 下一曲的播放 要用 ended

                // 1. 索引 + 1

//                this.currentIndex++;

//                // 2. 找到索引的src赋值给原来的src

//                if (this.currentIndex === this.musicData.length) {

//                    this.currentIndex = 0

//                }

//                this.currentSrc = this.musicData[this.currentIndex].songSrc;

                this.nextSong();

            },

            nextSong(){

                this.currentIndex++;

                // 2. 找到索引的src赋值给原来的src

                if (this.currentIndex === this.musicData.length) {

                    this.currentIndex = 0

                }

                this.currentSrc = this.musicData[this.currentIndex].songSrc;

            }

        }

    });

</script>

</body>

</html>

2）计算属性版本

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>音乐播放器</title>

    <meta name="viewport" content="width=device-width ,initial-scale=1">

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        ul {

            list-style: none;

        }

        ul li {

            margin: 20px 20px;

            padding: 10px 5px;

            border-radius: 3px;

        }

        ul li.active {

            background-color: gray;

        }

    </style>

</head>

<body>

<div id="app">

    <audio v-bind:src="getCurrentSongSrc" controls autoplay @ended="handerEnded"></audio>

    <ul>

        <li :class="{active:index===currentIndex}" v-for="(item, index) in musicData" :key="item.id"

            @click="handerClick(index)">

            <h2>{{item.id}}-歌名：{{item.name}}</h2>

            <p>{{item.author}}</p>

        </li>

    </ul>

    <button @click="nextSong">下一曲</button>

</div>

<script>

    const musicData = [{

        id: 1,

        name: '数到五答应我 - 曹格',

        author: '曹格',

        songSrc: './static/数到五答应我 - 曹格.mp3'

    },

        {

            id: 2,

            name: '风吹着我向你跑来 - 焦迈奇',

            author: '焦迈奇',

            songSrc: './static/风吹着我向你跑来 - 焦迈奇.mp3'

        }

    ];

    let app = new Vue({

        el: '#app',

        data: {

            musicData: musicData,   // 可以写成 因为是一样的 musicData

            // currentSrc: './static/数到五答应我 - 曹格.mp3',

            currentIndex: 0

        },

        // 变动1  不要写死的url了 就自己拿

        computed:{

            getCurrentSongSrc(){

                return this.musicData[this.currentIndex].songSrc

            }

        },

        methods: {

            handerClick(index) {

                // 就没有必要了 就不要传值了

                // this.currentSrc = src;

                this.currentIndex = index

            },

            handerEnded() {

                this.nextSong();

            },

            nextSong(){

                this.currentIndex++;

                if (this.currentIndex === this.musicData.length) {

                    this.currentIndex = 0

                }

                // 这个就没有必要了

                // this.currentSrc = this.musicData[this.currentIndex].songSrc;

            }

        }

    });

</script>

</body>

</html>

vue小练习--音乐播放器的更多相关文章

  1. 微信小程序音乐播放器

    写在前面 1.入门几天小白的作品,希望为您有帮助,有好的意见或简易烦请赐教 2.微信小程序审核音乐类别已经下架,想要发布选题需慎重.附一个参考链接,感谢https://www.hishop.com.c ...

  2. 微信小程序音乐播放器组件

    wxml <image bindtap="click" src="{{isPlay?'/images/':'/images/'}}"/> JS Pa ...

  3. 用Vue来实现音乐播放器（三十八）：歌词滚动列表的问题

    1.频繁切换歌曲时,歌词会跳来跳去 原因: // 歌词跳跃是因为内部有一个currentLyric对像内部有一些功能来完成歌词的跳跃 //每个currentLyric能实现歌曲的播放跳到相应的位置 是 ...

  4. Vue实战：音乐播放器（一） 页面效果

    先看一下效果图 首页 歌单详情页 歌手列表 歌手详情页 排行页面 榜单的详情页(排序样式) 搜索页面 搜索结果 播放器内核 歌词自动滚动 播放列表 用户中心

  5. 用Vue来实现音乐播放器（二十三）：音乐列表

    当我们将音乐列表往上滑的时候   我们上面的歌手图片部分也会变小 当我们将音乐列表向下拉的时候   我们的图片会放大 当我们将音乐列表向上滑的时候   我们的图片有一个高斯模糊的效果 并且随着我们的列 ...

  6. 用Vue来实现音乐播放器（十八）：右侧快速入口点击高亮

    问题一:当我们点击右侧快速入口的时候  被点击的地方高亮 首先我们要知道右侧快速入口是为什么高亮??因为当watch()监控到scrollY的变化了的时候  将scrollY的值和listHeight ...

  7. 用Vue来实现音乐播放器（九）：歌单数据接口分析

    z这里如果我们和之前获取轮播图的数据一样来获取表单的数据  发现根本获取不到 原因是qq音乐在请求头里面加了authority和refer等 但是如果我们通过jsonp实现跨域来请求数据的话  是根本 ...

  8. 用Vue来实现音乐播放器（八）：自动轮播图啊

    slider.vue组件的模板部分 <template> <div class="slider" ref="slider"> <d ...

  9. 用Vue来实现音乐播放器（二十一）：歌手详情数据抓取

    第一步:在api文件夹下的singer.js中抛出getSingerDetail方法 第二步:在singer-detail.vue组件中引入api文件夹下的singer.js和config.js 第三 ...

随机推荐

  1. java并发AtomicReference

    java并发AtomicReference AtomicReference的作用 已经介绍过AtomicInteger,AtomicIntegerArray,AtomicReference是针对对象的 ...

  2. kafka在zookeeper默认使用/为根目录，将/更换为/kafka

    需求:kafka在zookeeper默认使用/为根目录,将/更换为/kafka 步骤:1.进入kafka的根目录: [root@node01 kafka_2.11-1.0.0]# cd /export ...

  3. 引用类型--Object类型、Array类型

    引用类型的值(对象)是引用类型的一个实例.在ECMAScript中,引用类型是一种数据结构,它描述的是一类对象具有的属性和方法. 对象是某个特定引用类型的实例,新对象是使用new操作符后跟一个构造函数 ...

  4. Day10 - 灾难 HYSBZ - 2815

    Description 阿米巴是小强的好朋友. 阿米巴和小强在草原上捉蚂蚱.小强突然想,果蚂蚱被他们捉灭绝了,那么吃蚂蚱的小鸟就会饿死,而捕食小鸟的猛禽也会跟着灭绝,从而引发一系列的生态灾难. 学过生 ...

  5. 「NOIP2017」列队

    传送门 Luogu 解题思路 一眼平衡树,应该没问题吧? 但我们一定要反应过来,单点的维护是非常之困难的,因为这是一个网格图而不仅仅是一条序列. 我们要考虑把修改操作全都放在序列上进行. 其实题面里是 ...

  6. C++服务器与java进行socket通信案例

    分类: [java]2012-10-08 12:03 14539人阅读 评论(46) 收藏 举报 注:本代码版权所有!!!转载时请声明源地址:http://blog.csdn.net/nuptboyz ...

  7. 【Unity】鼠标点选物体

        Camera cam;    void Start () { cam =this.GetComponent<Camera>(); } void Update () { )) { T ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：内嵌下拉菜单的按钮组

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 小程序真机上报错 for developer: some selectors are not allowed in component wxss , including tag name selectors, id selectors, and attribute selectors

    for developer: some selectors are not allowed in component wxss , including tag name selectors, id s ...

  10. POJ 3348：Cows 凸包+多边形面积

    Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 7739   Accepted: 3507 Description ...