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地址 ...
随机推荐
- SSD 为什么顺序写比随机写性能更好?
SSD以Page为单位做读写,以Block为单位做垃圾回收,Page一般有16KB大小,Block一般有几十MB大小,SSD写数据的逻辑是: 1)将该块数据所在的Page读出 2)修改该Page中该块 ...
- Xcode 8 的 Debug 新特性 —- WWDC 2016 Session 410 & 412 学习笔记
Contents OverView Static Analyzer Localizability Instance Cleanup Nullablility Runtime Issue View De ...
- 【SqlServer】SqlServer索引的创建、查看、删除
索引加快检索表中数据的方法,它对数据表中一个或者多个列的值进行结构排序,是数据库中一个非常有用的对象. 索引的创建 #1使用企业管理器创建 启动企业管理器--选择数据库------选在要创建索引的表- ...
- 【Algorithm】基数排序
一. 算法描述 基数排序(以整形为例),将整形10进制按每位拆分,然后从低位到高位依次比较各个位.主要分为三个过程: 分配,先从个位开始,根据位值(0-9)分别放到0~9号桶中(比如53,个位为3,则 ...
- Android如何实现点击一次返回键返回桌面而不是退出应用
具体代码如下所示: @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent. ...
- android蓝牙开发---与蓝牙模块进行通信
近半个月来一直在搞android蓝牙这方面,主要是项目需要与蓝牙模块进行通信.开头的进展很顺利,但因为蓝牙模块不在我这里,所以只能用手机测试.一开头就发现手机的蓝牙不能用,为了证明这点,我刷了四次不同 ...
- Eclipse配置SQL Explorer插件和数据库
1.下载SQL Explore插件,地址:http://www.sqlexplorer.org/,下载第三个.复制到eclipse插件相应文件夹重新启动,下载RCP插件能够直接使用exe 2.下载JD ...
- SharePoint 2013混合模式登陆中 使用 自定义登陆页
接前一篇博客<SharePoint 2013自定义Providers在基于表单的身份验证(Forms-Based-Authentication)中的应用>,当实现混合模式登陆后,接着我们就 ...
- C#文件下载(实现断点续传)
public class WebDown { /// 下载文件方法 /// 文件保存路径和文件名 /// 返回服务器文件名 public static bool DeownloadFile(strin ...
- hibernate的hql查询语句总结
这篇随笔将会记录hql的常用的查询语句,为日后查看提供便利. 在这里通过定义了三个类,Special.Classroom.Student来做测试,Special与Classroom是一对多,Class ...