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音乐播放的更多相关文章

  1. html5,audio音乐播放器

    最终,做了自己原来一直想要实现的事儿.得出的结果是,有些事儿一旦開始做了,那么它就并非非常难. 如今的我,正听着自己的播放器放出的<光辉岁月>写这篇周六清晨的博文.写的不是非常好.但也请各 ...

  2. 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. HTML5项目笔记4:使用Audio API设计绚丽的HTML5音乐播放器

    HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...

  4. 使用Audio API设计绚丽的HTML5音乐播放器

    HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...

  5. 用<audio>标签打造一个属于自己的HTML5音乐播放器

    上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...

  6. 自定义css样式结合js控制audio做音乐播放器

    最近工作需求需要播放预览一些音乐资源,所以自己写了个控制audio的音乐播放器. 实现的原理主要是通过js调整audio的对象属性及对象方法来进行控制: 1.通过play().pause()来控制音乐 ...

  7. Audio 标签的使用和自己封装一个强大的React音乐播放器

    原文地址:https://www.dodoblog.cn/blog?id=5be84d5c70b2b617f27a4610 这篇文章主要介绍一下博客里的这个音乐播放器是怎么写的 为了更好的表达高深的东 ...

  8. html - html5 audio 音乐自动播放,循环播放等

    转自:http://blog.csdn.net/u012246458/article/details/50618759 audio播放音乐 <audio id="audio" ...

  9. 【大结局】《从案例中学习JavaScript》之酷炫音乐播放器(四)

    这是之前写的用H5制作的音乐播放器,前三节其实已经做得差不多了,音轨的制作原理已经在上一节说明,不过一直还没有和音乐对接. 本章作为该系列的一个完结篇,我会专门把动态音轨的实现代码贴出来,demo地址 ...

随机推荐

  1. (原)tensorflow中提示CUDA_ERROR_LAUNCH_FAILED

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6606092.html 参考网址: https://github.com/tensorflow/tens ...

  2. 【总结 】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 ...

  3. 使用userAgent判断使用的是什么浏览器

    <script type="text/javascript"> function validB(){ var u_agent = Navigator.userAgent ...

  4. Redis学习之路(003)- hiredis安装及测试

    一. hiredis下载地址及C API  github下载:https://github.com/redis/hiredis 安装脚本: #!/bin/zsh git clone https://g ...

  5. librbd 分析

    一.概述

  6. 【MySQL】MySQL的常规操作

    MySQL的常规知识 标准的SQL语句通常可分为如下的几种类型: 1,DCL(Database Control Language) :数据控制语言,主要由grant和revoke关键字组成. 2.DD ...

  7. 【MySQL】MySQL之MySQL5.7中文乱码

    自己的MySQL服务器不能添加中文,于是自己使用 show variables like 'character%'; 查看了当前的编码格式 我又通过以下方法将其设置为utf-8 SET charact ...

  8. Java后端,应该日常翻看的中文技术网站

    参考链接:http://calvin1978.blogcn.com/articles/dailysites.html

  9. mysql单机多实例

    在数据库服务器上,可以架构多个Mysql服务器,进行单机多实例的读写分离: 可以通过mysqld_multi来进行多实例的管理,mysqld_multi是用perl写的脚本,原理是通过mysql_ad ...

  10. [AaronYang]C#人爱学不学[1]

    当前编写时间:2014年12月24日21:11:14   编写人:杨洋(Aaronyang) 新文章:[AaronYang]C#人爱学不学[1] 声明:->可以理解为 联想到,或者关联的意思. ...