强大的howler.js

howler官网 https://howlerjs.com/
howler git地址 https://github.com/goldfire/howler.js

实现一个音乐播放器

下载howler

npm i howler

template代码

<template><div class="video_test"><div class="player_audio" ><div><button @click="play(true)" v-show="!playing">播放</button><button @click="pause(true)" v-show="playing">暂停</button><button @click="stop" v-show="playing">停止</button></div><div v-show="playing"><div>音量：<input type="range" min="0" max="1" step="0.1" v-model="volume"  @input="volumeChange" /><button @click="mute(true)" v-show="!muted">静音</button><button @click="mute(false)" v-show="muted">解除静音</button></div><div>播放速度：<select @change="rateChange" v-model="rate"><option :value ="0.5">0.5</option><option :value ="1.0">1.0</option><option :value ="1.25">1.25</option><option :value ="1.5">1.5</option><option :value ="2.0">2.0</option></select></div><div>播放进度条：<input type="range" v-model="value" min="0" max="100"  @drag-start="pause" @drag-end="play"  @input="change" /></div><button @click="pre">上一首</button><button @click="next">下一首</button></div></div></div>
</template>

<script>import {Howl} from 'howler'export default {name:'video-test',data() {return {rate: 1,volume: 1,audioSrc:['https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/zzzzz/mp3/%E6%B4%9B%E5%A4%A9%E4%BE%9D%20-%20%E4%B8%9C%E4%BA%AC%E4%B8%8D%E5%A4%AA%E7%83%AD.mp3','https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/zzzzz/mp3/French%20Kiss%20-%20Jealousy.mp3','https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/zzzzz/mp3/VIVI%20-%20%E5%BC%80%E5%BF%83%E5%BE%80%E5%89%8D%E9%A3%9E.mp3','https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/zzzzz/mp3/%E9%9D%92%E6%98%A5%E5%86%8D%E8%A7%81.mp3'],value:0,timer:'',playing:false,currentIndex:0,muted:false}},components:{// slider},created() {},mounted(){this.audioPlayer()},methods: {audioPlayer(){let that = thisthis.sound = new Howl({src: this.audioSrc[this.currentIndex % this.audioSrc.length],autoplay: true,loop: true,volume: this.volume,html5: true,preload:true,rate:this.rate,mute:that.muted,onload() {console.log('onload!',this);},onplay() {that.playing = true//that.duration = that.formatTime(Math.round(this._duration));that.step()console.log('onload!',this);},onmute() {that.muted = this._muted},onpause() {that.playing = falsethat.cancelAF()},onstop() {that.playing = falsethat.setTimerAndValue()that.cancelAF()},onend() {console.log('end')that.cancelAF()that.next()},});},formatTime(secs) {let minutes = Math.floor(secs / 60) || 0;let seconds = (secs - minutes * 60) || 0;return minutes + ':' + (seconds < 10 ? '0': '') + seconds;},play(){this.sound.play();},pause(){this.sound.pause()},stop(){this.sound.stop()},volumeChange(e){this.sound.volume(e.target.value)},mute(boolean){this.sound.mute(boolean)},rateChange(e){this.sound.rate(e.target.value)},pre(){this.stop()this.currentIndex = this.currentIndex >= 1 ? this.currentIndex - 1 : 0this.audioPlayer(this.currentIndex)this.play()},next(){this.stop()this.currentIndex = this.currentIndex + 1this.audioPlayer(this.currentIndex)this.play()},setTimerAndValue(){let seek = this.sound.seek();if (typeof seek === 'number'){this.timer = this.formatTime(Math.round(seek));this.value = Math.round((seek / this.sound._duration) * 100) || 0}},step(){this.setTimerAndValue()this.s = requestAnimationFrame(this.step);},cancelAF(){cancelAnimationFrame(this.s)},change(e){this.sound.seek(this.sound._duration * e.target.value / 100);this.setTimerAndValue()},},beforeDestroy(){this.cancelAF()}}
</script>

css

<style scoped>.video_test{text-align: center;}.player_audio{display: inline-block;padding-bottom: 0.3rem;text-align: left;}.player_audio div{padding: 0.1rem 0.15rem}
</style>

demo演示地址

https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/test/music/index.html#/howler

使用howler做一个音频播放器到底有多简单相关推荐

如何使用uni-app做一个音乐播放器
如何使用uni-app做一个音乐播放器 uni-app提供给我们非常棒的API,可以做出很好看的自定义样式的音乐播放器好的编译器可以让我们的项目事半功倍,HBuilderX可以很方便的创建uni-a ...
23|VS2017 基于MFC 做一个音乐播放器，带音量调节，切换歌曲
最近接到个小任务,用MFC做一个音乐播放器,不过这也是一直想尝试的,于是今天早上9点到下午16:00,总算是完成了需要的功能开门见山,先展示一下整体界面下面按照功能模块介绍我做这个播放器的过程预 ...
用React做一个音乐播放器
介绍任何正在学习 React 并想使用 React 构建项目的人.有各种博客和文章可以为开发人员指导此类项目.我确实浏览过这些文章,但其中总是缺少一种项目.缺少的项目是音乐播放器和视频播放器.这两个 ...
android做一个音乐播放器,制作一个简单的Android版的音乐播放器
音乐播放器是一个非常常见的应用,这篇博客就是介绍如何制作一个简单的音乐播放器,这款音乐播放器具有以下的功能:播放歌曲.暂停播放歌曲..显示歌曲的总时长.显示歌曲的当前播放时长.调节滑块可以将歌曲调节到 ...
手把手教你10分钟做一个音乐播放器
一.话不多,先看效果: 视频B站效果演示地址~ (大佬勿入,大佬勿入,大佬勿入)这是个单页面音乐播放器,只用到了 html+css 与很基础的vue语法,所以适合初学者,看一看10分钟就会了~ 这个 ...
做一个迷你播放器放在桌面
效果如图功能随意选取歌曲,循环播放,有音谱效果,音量控制,显示歌曲名,歌曲控制(播放与暂停.下一首和上一首) 操作将下面文件下载解压后放在MP3音乐文件夹内(该文件用FLASHPACKER打包) ...
用vue做一个音乐播放器
xz-music 音乐播放器(web移动端) 开源协议MIT License github: https://github.com/huangweizhi/xz-music.git gitee: ht ...
JS和H5做一个音乐播放器，附带源码
http://mp.weixin.qq.com/s/KpXT9X46AMlUVXQvpHuXGQ 效果图: 实现的功能 1.首页 2.底部播放控件 3.播放页面 4.播放列表 5.排行榜 6.音乐搜索 ...
用js，css做一个音乐播放器
做好如图所示: 下面开始上代码: html代码: <!DOCTYPE html> <html lang="en"> <head> <met ...

使用howler做一个音频播放器到底有多简单

强大的howler.js

实现一个音乐播放器

demo演示地址

使用howler做一个音频播放器到底有多简单相关推荐

最新文章

热门文章