vue小练习--音乐播放器
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.入门几天小白的作品,希望为您有帮助,有好的意见或简易烦请赐教 2.微信小程序审核音乐类别已经下架,想要发布选题需慎重.附一个参考链接,感谢https://www.hishop.com.c ...
- 微信小程序音乐播放器组件
wxml <image bindtap="click" src="{{isPlay?'/images/':'/images/'}}"/> JS Pa ...
- 用Vue来实现音乐播放器(三十八):歌词滚动列表的问题
1.频繁切换歌曲时,歌词会跳来跳去 原因: // 歌词跳跃是因为内部有一个currentLyric对像内部有一些功能来完成歌词的跳跃 //每个currentLyric能实现歌曲的播放跳到相应的位置 是 ...
- Vue实战:音乐播放器(一) 页面效果
先看一下效果图 首页 歌单详情页 歌手列表 歌手详情页 排行页面 榜单的详情页(排序样式) 搜索页面 搜索结果 播放器内核 歌词自动滚动 播放列表 用户中心
- 用Vue来实现音乐播放器(二十三):音乐列表
当我们将音乐列表往上滑的时候 我们上面的歌手图片部分也会变小 当我们将音乐列表向下拉的时候 我们的图片会放大 当我们将音乐列表向上滑的时候 我们的图片有一个高斯模糊的效果 并且随着我们的列 ...
- 用Vue来实现音乐播放器(十八):右侧快速入口点击高亮
问题一:当我们点击右侧快速入口的时候 被点击的地方高亮 首先我们要知道右侧快速入口是为什么高亮??因为当watch()监控到scrollY的变化了的时候 将scrollY的值和listHeight ...
- 用Vue来实现音乐播放器(九):歌单数据接口分析
z这里如果我们和之前获取轮播图的数据一样来获取表单的数据 发现根本获取不到 原因是qq音乐在请求头里面加了authority和refer等 但是如果我们通过jsonp实现跨域来请求数据的话 是根本 ...
- 用Vue来实现音乐播放器(八):自动轮播图啊
slider.vue组件的模板部分 <template> <div class="slider" ref="slider"> <d ...
- 用Vue来实现音乐播放器(二十一):歌手详情数据抓取
第一步:在api文件夹下的singer.js中抛出getSingerDetail方法 第二步:在singer-detail.vue组件中引入api文件夹下的singer.js和config.js 第三 ...
随机推荐
- MAC Matlab 中文乱码
环境:macOS High Sierra 10.13.4 问题:文件中文注释乱码(再次打开文件时) / 控制台输出中文乱码 解决方法: 官网下载补丁(https://ww2.mathworks.cn/ ...
- oracle练习-day03
.创建表空间.创建用户赋权限.创建表语法:.常见的数据类型字符 myname ) varchar2:推荐使用这个 可变长度最大字符 myname varchar2() 字 ...
- 腾讯2019秋招--小q爬塔(dp)
小Q爬塔 题目描述: 小Q 正在攀登一座宝塔,这些宝塔很特别.塔总共有 n 层,但是每两层之间的净高却不相同,所以造成了小Q 爬过每层的时间也不同.如果某一层的高度为 x,那么爬过这一层所需的时间也是 ...
- 图论初步2<蒟蒻专属,大佬勿喷>
前言: 本节课讲的是图论的几种遍历方式,若没看图论初步1的赶紧去看 https://www.cnblogs.com/Craker/p/12271090.html 正文: 零.温故而知新 上节课我们学的 ...
- 利用Powerdesigner16.5(64位)连接64位oracle 配置系统odbc驱动
利用Powerdesigner16.5(64位)连接64位oracle逆向工程数据库 记录一次Powerdesigner通过odbc连接64位oracle数据库.林林总总国内看到都是些乱七八糟没几个靠 ...
- [7b2美化]柒比贰 魔改系列|7B2-分类封面添加波浪效果&每日诗词
本文转载自:钻芒博客 https://www.zmki.cn/5105.html 效果如图: 代码: 首先在style.css样式表里添加波浪样式 /*浪来了*/ .lang { overflow: ...
- POJ1471 Tree/洛谷P4178 Tree
Tree P4178 Tree 点分治板子. 点分治就是直接找树的重心进行暴力计算,每次树的深度不会超过子树深度的\(\frac{1}{2}\),计算完就消除影响,找下一个重心. 所以伪代码: voi ...
- suse下静默方式安装oracle(无图形界面)
以 http://www.cnblogs.com/0201zcr/p/4728241.html 为主 以 http://www.cnblogs.com/jyzhao/p/5001782.html 为参 ...
- Day5 - H - Supermarket POJ - 1456
A supermarket has a set Prod of products on sale. It earns a profit px for each product x∈Prod sold ...
- php 获取时间段
switch ($type){ case 'day'://当日 $end=date(,,,date(,date('Y'))); $where=' and '.$pre.'create_time> ...