<!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. WebService之CXF注解之五（配置文件）

    1.web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version=" ...

  2. mac下安装ELK

    本文主要为自己所走弯路而做的补充,对小白(比如我)来讲某些博客讲的还是高深了,特地来此补充说明一些东西. 主要步骤参考http://blog.csdn.net/ywheel1989/article/d ...

  3. INT_MAX (2147483647) 和INT_MIN (-2147483648)溢出

    c语言中32位int型数据在运算的时候可能会出现溢出的情况,如: -2147483648-1会得到什么结果? -2147483648乘(-1)会得到什么结果? 2147483647+1会得到什么结果? ...

  4. jquery自带的方法

    5.1,$.trim $.trim("   Hello, chinaren_1123 & 摆渡浮桥!   "); //去掉前后空格后->Hello, chinaren ...

  5. cookie的初步认识

    一.会话的概念 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 有状态会话:一个同学来过教室,下次再来教室,我们会知道这个同学曾 ...

  6. 自定义JS乘法运算误差解决！

    在实际开发中遇到这样一个乘法公式:数量*单价=总价 像这样的浮点数列子:200*8.2,JS算出的结果是: 像这种浮点数的乘法计算就会有误差,我们需要得到准确的值应该是:1640,与我们后台C#计算结 ...

  7. 实例 编辑 .bashrc（不断更新）

    .bashrc 是/root下的隐藏文件,可按习惯编辑命令的别名. vi .bashrc alias rm='rm -i'#alias cp='cp -i'alias mv='mv -i'alias ...

  8. python 生成器和迭代器有这篇就够了

    本节主要记录一下列表生成式,生成器和迭代器的知识点 列表生成器 首先举个例子 现在有个需求,看列表 [0,1,2,3,4,5,6,7,8,9],要求你把列表里面的每个值加1,你怎么实现呢? 方法一(简 ...

  9. 手机浏览网页或打开App时莫名弹出支付宝领红包界面的原因及应对措施

    自从支付宝推出扫码领红包活动后,这种模式独特的赏金机制,短时间内吸引了大量的关注,但是随之也产生了很多的问题,比由于如在赏金的驱动下,微信群里铺天盖地的红包口令,朋友圈里各式各样的领红包二维码图片, ...

  10. zjoi网络

    map加LCT水一下就过了 # include <stdio.h> # include <stdlib.h> # include <iostream> # incl ...