<!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. USB设备驱动概述

    USB设备驱动 ·  )USB Hub:每个USBHost控制器都会自带一个USB Hub,被称为根(Root)Hub.这个根Hub可以接子(Sub)Hub,每个Hub上挂载USB设备.一般PC有8个 ...

  2. （二十三）mongodb中group的问题

    今天的工作中我需要从mongodb数据库中查出一定的数据,并排序后返回给前台,数据库表中包含了ruleID,processingID,userID,updateTime等字段.    同一个ruleI ...

  3. Visual Studio 2012 和 SVN 结合实现版本控制 AnkhSvn

    第一步: 安装VisualSVN Server Manager. 下载地址:http://www.onlinedown.net/soft/89603.htm 第二步: 安装TortoiseSVN.注意 ...

  4. 芝麻HTTP：Ansible扩展

    Ansible简介 Ansible是由Python开发的一个运维工具,因为工作需要接触到Ansible,经常会集成一些东西到Ansible,所以对Ansible的了解越来越多. 那Ansible到底是 ...

  5. linux iscsi配置

    iSCSI 是一种 SAN的设备而 SAN的设备主要是提供 Server 存储体的空间.相较于传统的 SAN 是以光纤为传输媒体而 iSCSI(Internet SCSI)他是 IP-based 的数 ...

  6. 申请Jetbrain教育帐号，免费使用一年

    JetBrains是一家捷克的软件开发公司.旗下IDE产品有(不限于):(1) IntelliJ,IDEA  Java集成开发工具:(2) PHPStorm,PHP 集成开发工具:(3) PyChar ...

  7. linux用户和群组

    1.用户的主要群组和次要群组   切换用户:su -username 查看群组:#vi /etc/passwd         //主要群组                  #vi /etc/gro ...

  8. ssm框架之将数据库的数据导入导出为excel文件

    在这里首先我要将自己遇到的各种问题,以及需求记录下来,做一个备忘,便于以后查看: 需求:主要实现两个功能,将oracle数据库里的数据导出为excel,同时需要将excel表格的数据导入到数据库 环境 ...

  9. [USACO15FEB]审查（黄金）Censoring (Gold)

    题面 传送门 Sol AC自动机+栈,每次匹配到栈顶减去这个单词的长度,回到之前的状态 最后栈中留下的就是答案 # include <bits/stdc++.h> # define IL ...

  10. 关于input 的选中，自定义input[type="checkbox"]样式

    1.css 呈现   选中后 的input的样式可以用 /*背景图*/      background:url('../pc/images/archives/icon_choosed.png') no ...