vue3+howler.js实现音频播放，兼容大多数音频格式

howler.js中文网址：http://www.npmdoc.org/howlerzhongwenwendanghowler-jszhongwenjiaochengjiexi.html

howler.js官网：

https://howlerjs.com/

本例子使用技术如下：

Vue3+Ant Design Vue+howler

实现音频播放对话框

howler安装：npm i howler

实现效果如下：

代码如下：

<template><a-modal v-model:visible="visible"  :footer="null" destroyOnClose closable><div class="audio-top"><span class="audio-top-time">{{startTime}}</span><a-slider  v-model:value="value" :tip-formatter="formatter"@change="timeChange" /><span class="audio-top-time">{{endTime}}</span></div><div class="audio-buttom"><div class="audio-buttom-btn"><a-button type="primary" shape="circle" @click="backUp"><template #icon> <FastBackwardFilled :style="{fontSize:'20px'}"/></template></a-button><a-button v-if="!playing" type="primary" shape="circle" @click="play"><template #icon> <CaretRightOutlined  :style="{fontSize:'20px'}"/></template></a-button><a-button v-if="playing" type="primary" shape="circle" @click="pause"><template #icon> <PauseOutlined   :style="{fontSize:'20px'}"/></template></a-button><a-button type="primary" shape="circle" @click="advance"><template #icon> <FastForwardFilled :style="{fontSize:'20px'}"/></template></a-button></div><a-slider  v-model:value="volume" @change="volumeChange"/></div></a-modal>
</template><script>
import { Modal, Slider } from 'ant-design-vue';
import {reactive, toRefs, watch, ref,
} from 'vue';
import {FastBackwardFilled, CaretRightOutlined, FastForwardFilled, PauseOutlined,
} from '@ant-design/icons-vue';
import { Howl } from 'howler';export default {components: {FastBackwardFilled,CaretRightOutlined,FastForwardFilled,PauseOutlined,[Modal.name]: Modal,[Slider.name]: Slider,},setup() {const state = reactive({visible: false,loading: false,volume: 50,loudness: 0.5, // 音量audioSrc: [ // 播放列表],value: 0, // 播放进度条playing: false, // 播放状态 false停止  true播放startTime: '00.00', // 开始时间endTime: '00.00', // 结束时间});const sound = ref();// 分秒转化const formatTime = (secs) => {const minutes = Math.floor(secs / 60) || 0;const seconds = Math.floor(secs - minutes * 60) || 0;return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;};// 计算出 当前进度条时间 以及进度条位置const setTimerAndValue = () => {const seek = sound.value.seek();if (typeof seek === 'number') {const startTimer = formatTime(Math.round(seek));// eslint-disable-next-line no-underscore-dangleconst endTimer = formatTime(Math.round(sound.value._duration));// eslint-disable-next-line no-underscore-danglestate.value = Math.round((seek / sound.value._duration) * 100) || 0;state.startTime = startTimer;state.endTime = endTimer;}};const step = () => {setTimerAndValue();requestAnimationFrame(step);};// 监听 对话框打开watch(() => state.visible, (newValue) => {if (newValue === true) {state.playing = true;sound.value.play();// 播放} else {state.playing = false;sound.value.stop();// 结束}});// 抽屉开启const showModal = (e) => {state.loading = true;state.volume = 50;state.loudness = 0.5;state.audioSrc = e.audioSrc;sound.value = new Howl({src: state.audioSrc,volume: state.loudness,autoplay: true,loop: true,html5: true,preload: true,onplay: onplay = () => {step();},});state.visible = true;};// 播放const play = () => { state.playing = true; sound.value.play(); };// 暂停const pause = () => { state.playing = false; sound.value.pause(); step(); };// 前进// eslint-disable-next-line no-underscore-dangleconst advance = () => { sound.value.seek(sound.value._duration * (state.value / 100) + 5); };// 后退// eslint-disable-next-line no-underscore-dangleconst backUp = () => { sound.value.seek(sound.value._duration * (state.value / 100) - 5); };// 音量设置const volumeChange = (e) => { sound.value.volume(e * 0.01); };// 时间进度条变化事件// eslint-disable-next-line no-underscore-dangleconst timeChange = (e) => { sound.value.seek((sound.value._duration * e) / 100); };// 时间进度条提示// eslint-disable-next-line no-underscore-dangleconst formatter = (value) => formatTime((value / 100) * sound.value._duration);return {...toRefs(state),sound,showModal,formatter,formatTime,play,pause,advance,backUp,volumeChange,setTimerAndValue,timeChange,};},
};
</script><style lang="less" scoped>
.audio-buttom{display: flex;justify-content: space-between;align-items: center;:deep(.ant-slider){width: 300px;}&-btn{width: 120px;display: flex;justify-content: space-around;}
}
.audio-top{display: flex;justify-content: space-around;align-items: center;&-time{width: 40px;}:deep(.ant-slider){width: 100%;}
}
</style>

vue3+howler.js实现音频播放，兼容大多数音频格式相关推荐

canvas+howler.js 解决同页面视频、音频同时播放问题
canvas+howler.js 解决同页面视频.音频同时播放问题参考文章: (1)canvas+howler.js 解决同页面视频.音频同时播放问题 (2)https://www.cnblogs. ...
Howler.js：用于现代Web的音频库
Howler.js提供了一个现代音频库,支持Web Audio API和HTML5 Audio的回退机制.该项目致力于简化与使用JavaScript开发跨平台音频相关的开发工作. Howler.js为 ...
uniapp实现音频播放抢占系统音频焦点
项目为使用uniapp框架开发的Android/iOS APP应用实现功能需求假设手机正在播放音乐,当前APP处于前台收到消息,需播放提示音提示用户.目标为降低后台正在播放音乐的音量,播放提示音, ...
html audio播放本地语音文件,HTML5+ - audio音频播放及网络音频文件播放
1.介绍常用方法 createPlayer()创建音频对象 play: 开始播放音频 pause: 暂停播放音频 resume: 恢复播放音频 stop: 停止播放音频 seekTo: 跳到指定位置播 ...
Android官方开发文档Training系列课程中文版：管理音频播放之管理音频焦点
原文地址:http://android.xsoftlab.net/training/managing-audio/audio-focus.html 因为可能会存在多个APP播放音频,所以考虑它们之间的 ...
创建多媒体APP 之音频播放：管理音频焦点
因为很多APP都会潜在需要去播放音频文件,所有要考虑多个APP在播放音频文件的时候会产生的影响,这个非常重要.为了防止同时有多个APP播放音频,android采用了音频焦点这个概念来节制APP对音频的 ...
ios系统html播放音频播放器,iOS音频播放之AVAudioPlayer，AVPlayer，AVQueuePlayer
本文以婚语APP为例,来讲解集体使用方法. 在婚语APP中,分别使用了AVAudioPlayer,AVPlayer,AVQueuePlayer来实现音频播放功能,下面以婚语的实际需求分别介绍它们的使用 ...
js 实现连续播放多条音频文件
音频文件数组 var musicArr = new Array('xxx.mp3',xxx1.mp3''); 方法一:[简单粗暴] 直接调用 palyTest(0,musicArr); functio ...
【音频播放】自制音频播放器—音视频基础概念，未完待续。。。
近期用Electron制作了一个简易版客户端,未完待补充,重点在播放,引用凯教,先说几点.(图片禁止搬运,不得允许不准转载) 研究音频的数字化技术之前,必须对声音和图像的的物理性质有基本的了解. 如下 ...

vue3+howler.js实现音频播放，兼容大多数音频格式

vue3+howler.js实现音频播放，兼容大多数音频格式相关推荐

最新文章

热门文章