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 第三 ...
随机推荐
- Serializable的理解和使用 -----转载
1.定义 这是一个接口,当一个类实现这个接口后,这个类就变成了一个可序列化的类,它就可以被写入流,保存起来,然后也可以用流读取,反序列化. 一般情况下,一个对象会随着程序的执行完成而消失,而有时我们需 ...
- Django（十九）文件上传：图片上传(后台上传、自定义上传)、
一.基本设置 参考:https://docs.djangoproject.com/zh-hans/3.0/topics/http/file-uploads/ 1)配置project1/settings ...
- 前端学习(20)~css布局(十三)
常见的布局属性 (1)display 确定元素的显示类型: block:块级元素. inline:行内元素. inline-block:对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以 ...
- 在linux7(centos)中安装python3.7.2
一般情况下linux上都默认安装了python,检查一下我的版本 没有安装python3,但是目前已经是python3了,所以为了方便,还是要在系统上安装一下比较好. 上面的命令,直接输入python ...
- element设置headers添加token
<template> <div> <el-upload action="http://localhost:3000/picture&qu ...
- win10提示防火墙没有法更改某些设置的处理办法
一.问题发现 远程链接电脑时间发现远程链接失败 提问在“控制面板” 中打开“程序” 列表中启用“windows 防火墙” . 按照提示启用防火墙 ,发现启用或关闭页面不可编辑 二.原因是防火墙Wind ...
- Http与Https协议规范
HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW中使用的是HTTP/1.0的第 ...
- ubuntu 新建用户后 不能使用TAB键、上下键，命令行不显示当前路径的解决
因默认ubuntu创建的普通帐号,默认shell为/bin/sh,而这不支持tab等键的,所以将「指定用户」帐号的shell改为/bin/bash就可以了. 1.查看当前的shell:# echo $ ...
- es和数据类型
js=es+dom+bom,dom和bom前面已经讲完了 es是js的本体,是指数据类型,和对于数据的操作手段,他的版本更新得很快 这些功能不是html文件提供的,也不是浏览器提供的,即使脱离了dom ...
- Typescript 实战 --- （9）ES6与CommonJS的模块系统
1.ES6模块系统 1-1.export 导出 (1).单独导出 // a.ts export let a = 1; (2).批量导出 // a.ts let b = 2; let c = 3; ex ...