<!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. Stanford Word Segmenter使用

    1,下载 Stanford Word Segmenter软件包: Download Stanford Word Segmenter version 2014-06-16 2,在eclipse上建立一个 ...

  2. Dictionary排序

    有时候由于某些要求会对Dictionary排序,一般有两种方法. 1.使用SortedDictionary. 这种自动会对保存的值进行排序. static void Main(string[] arg ...

  3. hdu5887 Herbs Gathering

    神他妈随便写写就能过- 暴力枚举每个取不取 两个剪纸: 1.当剩下可用的时间小于最少需要用的时间 跳出 2.当剩下的植物按照理想情况(甚至可以取一部分)得到的极限答案比已经求出的答案大 跳出 #inc ...

  4. 在.Net Core中使用MongoDB的入门教程（一）

    首先,我们在MongoDB的官方文档中看到,MongoDb的2.4以上的For .Net的驱动是支持.Net Core 2.0的. 所以,在我们安装好了MangoDB后,就可以开始MangoDB的.N ...

  5. Python 学习笔记（二）开发环境的搭建

    安装Python windows 下安装: 下载地址:https://www.python.org/downloads Python的版本 3.x 是趋势 2.x 还在被大量使用 至于使用2.x 还是 ...

  6. SpringMVC 框架系列之组件概述与配置详解

    在上一篇文章 SpringMVC 框架系列之初识与入门实例 的实例中,我们已经知道,SpringMVC 框架是一个 web 层的框架,本篇文章就详细解释一下 SpringMVC 框架具体文件的配置以及 ...

  7. ubuntu 14.04 下实现浏览器接收UDP视频流

    前言 由于近期项目需求,需实现在浏览器上实时预览接收UDP视频流信息.此功能若在VLC上可轻松播放,奈何由于Chrome.Firefox版本的升级,渐渐浏览器不支持外部插件,因而使用VLC web插件 ...

  8. flask项目部署到阿里云 ubuntu16.04

    title: flask项目部署到阿里云 ubuntu16.04 date: 2018.3.6 项目地址: 我的博客 部署思路参考: Flask Web开发>的个人部署版本,包含学习笔记. 开始 ...

  9. [转]Nginx基本功能极速入门

    原文链接:Nginx基本功能极速入门 | 叉叉哥的BLOG 本文主要介绍一些Nginx的最基本功能以及简单配置,但不包括Nginx的安装部署以及实现原理.废话不多,直接开始. 1.静态HTTP服务器 ...

  10. 26.Django模板语言和分页

    继承 extends 子版只能继承一个父模板 1.父模板 master.html <!DOCTYPE html> <html lang="en"> < ...