audio音乐播放
1.audio标签
<audio @play="ready" @error="error" ref="audio" :src="currentSong.url"></audio>
2.中间圆cd和播放/暂停按钮动画
playIcon(){
return this.playing ? ' iconfont icon-pause-' : 'iconfont icon-bofang1'
},
cdCls(){
return this.playing ? 'play' :'play pause'
}
3.通过mutations来设置播放/暂停----上一首/下一首-----min/normal播放
methods:{
...mapMutations({
setFullScreen:'SET_FULL_SCREEN',
setPlayingState:'SET_PLAYING_STATE',
setCurrentIndex:'SET_CURRENT_INDEX',
}),
mini(){//当电机及此按钮的时候,将全屏显示转换为“迷你播放”
this.setFullScreen(false)
},
4.监听currentsong的变化,当currentsong发生变化的时候,让歌曲播放;
currentSong(){//一点击歌曲进来的时候是播放状态
this.$nextTick(()=>{
this.$refs.audio.play()
})
},
5.监听playing的播放状态
playing(newPlaying){//监听是否在播放---切换播放暂停状态
console.log(newPlaying)
const audio = this.$refs.audio
newPlaying ? audio.play() : audio.pause()
}
6.上一曲/下一曲切换:
prev(){//点击上一首/下一首切换其实就是切换歌曲的播放索引,让其+1/-1;audio由一个ready属性,来确认是否准备好播放,来阻止用户的连续多次点击;
if (!this.songReady) {
return
}
let index = this.currentIndex -1
if(index ===1){
index = this.playlist.length -1
}
this.setCurrentIndex(index)
if(!this.playing){
this.togglePlaying()
}
},
next(){
if (!this.songReady) {
return
}
let index = this.currentIndex + 1
if (index === this.playlist.length){
index = 0
}
this.setCurrentIndex(index)
if(!this.playing){//当暂停时候点击播放的情况
this.togglePlaying()
}
},
ready(){
this.songReady = true
},
audio音乐播放的更多相关文章
- html5,audio音乐播放器
最终,做了自己原来一直想要实现的事儿.得出的结果是,有些事儿一旦開始做了,那么它就并非非常难. 如今的我,正听着自己的播放器放出的<光辉岁月>写这篇周六清晨的博文.写的不是非常好.但也请各 ...
- 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5项目笔记4:使用Audio API设计绚丽的HTML5音乐播放器
HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...
- 使用Audio API设计绚丽的HTML5音乐播放器
HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...
- 用<audio>标签打造一个属于自己的HTML5音乐播放器
上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...
- 自定义css样式结合js控制audio做音乐播放器
最近工作需求需要播放预览一些音乐资源,所以自己写了个控制audio的音乐播放器. 实现的原理主要是通过js调整audio的对象属性及对象方法来进行控制: 1.通过play().pause()来控制音乐 ...
- Audio 标签的使用和自己封装一个强大的React音乐播放器
原文地址:https://www.dodoblog.cn/blog?id=5be84d5c70b2b617f27a4610 这篇文章主要介绍一下博客里的这个音乐播放器是怎么写的 为了更好的表达高深的东 ...
- html - html5 audio 音乐自动播放,循环播放等
转自:http://blog.csdn.net/u012246458/article/details/50618759 audio播放音乐 <audio id="audio" ...
- 【大结局】《从案例中学习JavaScript》之酷炫音乐播放器(四)
这是之前写的用H5制作的音乐播放器,前三节其实已经做得差不多了,音轨的制作原理已经在上一节说明,不过一直还没有和音乐对接. 本章作为该系列的一个完结篇,我会专门把动态音轨的实现代码贴出来,demo地址 ...
随机推荐
- (原)tensorflow中提示CUDA_ERROR_LAUNCH_FAILED
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6606092.html 参考网址: https://github.com/tensorflow/tens ...
- 【总结 】550,535,553 Mail from must equal authorized user— jenkins(hudson) email163邮箱和26邮箱成功配置总结
Failed to send out e-mail com.sun.mail.smtp.SMTPSendFailedException: 553 Mail from must equal author ...
- 使用userAgent判断使用的是什么浏览器
<script type="text/javascript"> function validB(){ var u_agent = Navigator.userAgent ...
- Redis学习之路(003)- hiredis安装及测试
一. hiredis下载地址及C API github下载:https://github.com/redis/hiredis 安装脚本: #!/bin/zsh git clone https://g ...
- librbd 分析
一.概述
- 【MySQL】MySQL的常规操作
MySQL的常规知识 标准的SQL语句通常可分为如下的几种类型: 1,DCL(Database Control Language) :数据控制语言,主要由grant和revoke关键字组成. 2.DD ...
- 【MySQL】MySQL之MySQL5.7中文乱码
自己的MySQL服务器不能添加中文,于是自己使用 show variables like 'character%'; 查看了当前的编码格式 我又通过以下方法将其设置为utf-8 SET charact ...
- Java后端,应该日常翻看的中文技术网站
参考链接:http://calvin1978.blogcn.com/articles/dailysites.html
- mysql单机多实例
在数据库服务器上,可以架构多个Mysql服务器,进行单机多实例的读写分离: 可以通过mysqld_multi来进行多实例的管理,mysqld_multi是用perl写的脚本,原理是通过mysql_ad ...
- [AaronYang]C#人爱学不学[1]
当前编写时间:2014年12月24日21:11:14 编写人:杨洋(Aaronyang) 新文章:[AaronYang]C#人爱学不学[1] 声明:->可以理解为 联想到,或者关联的意思. ...