<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基于H5的vue音乐播放器</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id='app'>
<input type="button" value="静音" @click='novoice'><input type="button" value="播放" @click='playing'><br>
<input type="button" value="上一曲" @click='last'><input type="button" value="下一曲" @click='next'><br>
<label>音量：</label><input type='range'min="0.1" max="1" step="0.1" @change='vol()' ref='volume'><br>
<label>播放进度：</label><input type='range'min="1" max="286" step="1" @change='range()' ref='progress'><br>
<audio :src='musicsrc' @canplaythrough='loaded()' @timeupdate="time()" @ended="end()" ref='music'>您的浏览器版本过低，请升级您的浏览器</audio>
<p>当前进度:{{currenttime}}</p>
<p>总时长:{{alltime}}</p>
</div>
 
<script>
new Vue({
el: '#app',
data: {
 
currenttime:'',//已播放时间
alltime:'',//歌曲总时长
isplay:true,//是否播放状态
isnovoice:false,//是否静音状态
sing:['./bgm.mp3','./bgm2.mp3','./bgm3.mp3','./bgm4.mp3','./bgm5.mp3','./bgm6.mp3','./bgm7.mp3','./bgm8.mp3','./bgm9.mp3','./bgm10.mp3'],//歌曲路径数组
musicsrc:'',//双向绑定音乐路径
index:0//当前歌曲的索引
},
methods:{
 
loaded(){//歌曲加载完成可以播放后执行该函数
this.$refs.music.play();
this.alltime=this.$refs.music.duration
this.$refs.music.volume=0.4;
this.$refs.volume.value=0.4;
// this.$refs.music.currentTime=0;
// this.$refs.progress.value=0;
let allmm,allss;
if(this.alltime<60){//把毫秒数转换为分和杪
this.alltime= Math.round(this.alltime) ;
if(this.alltime<10){//小于十秒前面加0
this.alltime='0'+ Math.round(this.alltime) ;
}
}else{
allmm=Math.floor(this.alltime/60);
allss=Math.round(this.alltime-allmm*60) ;
this.alltime=allmm+':'+allss;
}
},
playing(){//播放以及暂停功能实现
if(this.isplay){
this.$refs.music.pause()
this.isplay=!this.isplay;
}else{
this.$refs.music.play()
this.isplay=!this.isplay;
}
 
},
novoice(){//静音功能实现
this.isnovoice=!this.isnovoice;
this.$refs.music.muted= this.isnovoice;
 
},
time(){//当前歌曲已经播放的时间
this.currenttime=this.$refs.music.currentTime;
let allmm,allss;
if(this.currenttime<60){//把毫秒数转换为分和杪
this.currenttime= Math.round(this.currenttime) ;
if(this.currenttime<10){
this.currenttime='0'+ Math.round(this.currenttime) ;
}
}else{
allmm=Math.floor(this.currenttime/60);
allss=Math.round(this.currenttime-allmm*60) ;
this.currenttime=allmm+':'+allss;
}
// console.log(this.$refs.music.currentTime)
},
end(){//当前歌曲是否播放完成处理
console.log(this.$refs.music.ended) ;
if(this.$refs.music.ended){
if(this.index<this.sing.length){
this.index++;
}else{
this.index=0;
}
this.musicsrc=this.sing[this.index]
}
},
next(){//下一曲
if(this.index!=this.sing.length-1){
this.index++;
}else{
this.index=0;
}
console.log(this.index)
this.musicsrc=this.sing[this.index]
},
last(){//上一曲
if(this.index>0){
this.index--;
}else{
this.index=this.sing.length-1;
}
console.log(this.index)
this.musicsrc=this.sing[this.index]
},
vol(){//音量君
console.log( this.$refs.volume.value)
this.$refs.music.volume=this.$refs.volume.value
},
range(){//进度君
console.log( this.$refs.progress.value) ;
this.$refs.music.currentTime =this.$refs.progress.value;
this.currenttime= this.$refs.music.currentTime;
}
},
mounted(){
this.musicsrc=this.sing[this.index]
}
})
 
</script>
</body>
</html>

一个基于H5audio标签的vue音乐播放器的更多相关文章

  1. 基于Qt Phonon模块实现音乐播放器

    这次使用Qt实现的是一个本地音乐播放器,可以播放下载在计算机本地的音乐,提供了添加歌曲,歌曲列表,清空列表的功能.默认歌曲列表循环播放.音乐播放的实现主要依赖的是Qt 的多媒体框架phonon.该音乐 ...

  2. vue音乐播放器

    利用vue写一个简单的音乐播放器,包括功能有歌曲搜索.歌曲播放.歌曲封面.歌曲评论.播放动画.mv播放六个功能. <template> <div class="wrap&q ...

  3. vue 音乐播放器报错

    使用Vue报错[Vue warn]: Error in nextTick: "TypeError: fn.bind is not a function"页面进不去. 检查:看看da ...

  4. Vue音乐播放器（三）：项目目录介绍，以及图标字体、公共样式等资源准备

    我们所有的开发都是基于修改src下面的目录 里面的文件去做开发即可 stylus的使用是需要下载stylus-loader的包的 渲染效果 配置修改eslintrc.js 配置了webpack.bas ...

  5. 如何用vue打造一个移动端音乐播放器

    写在前面 没错,这就是慕课网上的那个vue音乐播放器,后台是某音乐播放器的线上接口扒取,虽然这类项目写的人很多,但不得不说这还是个少有的适合vue提升的好项目,做这个项目除了想写一个比较大并且功能复杂 ...

  6. 【源码分享】mui实现简单的手机音乐播放器

    mui实现简单的手机音乐播放器 最近先来无事,我用mui写了一个可以跨页面控制的音乐播放器.主要功能有上一曲,下一曲,播放,暂停,感兴趣的可以继续看下去. 说的总是不实在,直接上源码,有兴趣的可以读下 ...

  7. SE Springer小组之《Spring音乐播放器》可行性研究报告一、二（转载）

         此文转载自组员小明处~~ 1 引言 1．1编写目的 <软件工程>课程,我们团队计划开发一个音乐播放器.本文档是基于网络上现有的音乐播放器的特点,团队计划实现的音乐播放器功能和团队 ...

  8. SE Springer小组《Spring音乐播放器》可行性研究报告一、二

    1 引言 1．1编写目的 <软件工程>课程,我们团队计划开发一个音乐播放器.本文档是基于网络上现有的音乐播放器的特点,团队计划实现的音乐播放器功能和团队人员的综合实力等情况,说明该软件开发 ...

  9. Android（java）学习笔记234： 服务（service）之音乐播放器

    1.我们播放音乐,希望在后台长期运行,不希望因为内存不足等等原因,从而导致被gc回收,音乐播放终止,所以我们这里使用服务Service创建一个音乐播放器. 2.创建一个音乐播放器项目(使用服务) (1 ...

随机推荐

  1. JavaScript遍历table

    JavaScript遍历table 1.说明      遍历表格中的某行某列,并打印其值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  2. （十四）java中super和this

    super代表的是父类.超类,用在继承中的子类中:this代表对象本身,用在本类中.     super访问的是被子类隐藏的父类的属性或被覆盖的方法,而this访问的是同一类中的成员.     sup ...

  3. html中的div span和frameset框架标签

    Div和span 1.      div独占一层,由div九不允许有别的. 2.      span标签不是独自占用一行,span一般用来设置字体. 框架标签: 什么是框架标签,就是把一个页面分成很多 ...

  4. iOS - Core Animation 核心动画

    1.UIView 动画 具体讲解见 iOS - UIView 动画 2.UIImageView 动画 具体讲解见 iOS - UIImageView 动画 3.CADisplayLink 定时器 具体 ...

  5. httpclient的主要业务代码逻辑（图解）

    一,主要代码逻辑(图解) 二,两个案例的对比(图解) 三,详细案例 3.1,博文一 httppost的用法(NameValuePair(简单名称值对节点类型)核心对象) 3.2,博文二 httpcli ...

  6. SqlBulkCopy 批量复制数据到数据库

    1.简介 1.MSDN 核心方法:SqlBulkCopy.WriteToServer 将所有行从数据源复制到 SqlBulkCopy 对象的 DestinationTableName 属性指定的目标表 ...

  7. MongoDB添加用户验证

    Mongodb默认启动是不带认证,也没有账号,只要能连接上服务就可以对数据库进行各种操作,这样可不行.现在,我们得一步步开启使用用户和认证. 第一步,我们得定位到mongodb的安装目录.我本机的是C ...

  8. 使用ASP.NET广告控件的XML语言创建广告链接--ASP.NET

    1.AdRotator广告控件的所有属性都是可选的,XML文件中可以包含如下表所示的属性(XML文件的广告属性).   属性 说明 ImageUrl 要显示的图像的URL  NavigateUrl 单 ...

  9. 清橙A1212：剪枝

    题面 清橙 Sol 一种新的树上\(DP\)姿势 从左往右按链\(DP\) 做法: 维护两个栈\(S1\),\(S2\) \(S1\)存当前的链 \(S2\)存分叉点以下要改的链 \(Dfs\),弄一 ...

  10. 如何使用Git以及GitHub

    Git在程序的版本控制上有着极大的优势,下面是简单对其的简介 Git 的特点: 1 Snapshots, Not Differences 直接记录快照而非差异对比. 传统的版本控制系统(version ...