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. C#调用Win32 的API函数--User32.dll ----转载

    Win32的API函数是微软自己的东西,可以直接在C#中直接调用,在做WinForm时还是很有帮助的.有时候我们之直接调用Win32 的API,可以很高效的实现想要的效果. using System; ...

  2. 联想电脑硬盘保护系统EDU8.0.1iso安装

    管理306机房4年了,15年我带领的第一批学生参加吉林省职业院校技能大赛的时候,领导把这个机房交给我负责.那个时候这个机房的机器是全校的顶配,30台DELL16G内存,2T硬盘,I7处理器,后面是6组 ...

  3. BugFix系列---开篇介绍

      这个系列的文章,主要目的在于积累总结实际开发中遇到的错误,记录下来自己的解决思路,用来提升自己. 不出意外,应该会持续不断的记录更新,在整个开发openstack的过程中,抓住机会吸取开源界大牛的 ...

  4. AOP五种执行时机

    动态代理四种增强方式 先创建一个service类 package com.zzj.calculatar.service; import org.springframework.stereotype.S ...

  5. 图片转换到指定大小PDF

    1.首先转换为eps jpeg2ps compile to exec file ./jpeg2ps  -p a4  a.jpg -o x.eps2.从eps转换到pdf ps2pdf -dDownsa ...

  6. Button btn = sender as Button; //创建Button对象 这句话中Sencler和as是什么。怎么使用Sender和as

    ender是个object类型的变量名,通常都是事件的默认参数名,而这个变量存的是触发这个事件的控件,而as 可以理解为抽象,它把object类理的sender变量抽象成了(Button)类型.这样它 ...

  7. vs2010编译C++ 友元函数

    // CTest.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #include &l ...

  8. POJ 3371：Flesch Reading Ease 模拟

    Flesch Reading Ease Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2071   Accepted: 60 ...

  9. 201707《Ruby元编程》

    元编程不过是编程--经典必读 作用域(绑定) 打破作用域门的方式 对象模型图 七条规则 法术手册 作用域(绑定) 改变作用域的关键字, 分别是module,class和def.我们称为作用域的门(sc ...

  10. Jmeter测试入门——带token的http请求

    安装 官网下载地址:http://jmeter.apache.org/download_jmeter.cgi 下载完成后解压zip包 启动JMeter,双击JMeter解压路径bin下面的jmeter ...