JavaScript 播放多条音频与延迟播放

这里笔者用到一个很实用的音频播放库，howler.js , 这个音频库支持多种格式的音频播放，并提供了丰富的音频播放功能，详细可以参考其官网：https://howlerjs.com。

本文主要用它封装一个实用的音频播放小模块，主要实现多音频播放，以及多音频播放时每条音频延时播放，可以用于一些特定的业务场景，例如游戏场景。代码如下：

audio-play.js

import { Howl, Howler } from 'howler';const audioConf = {preload: true, //预加载autoPlay: true, //自动播放volume： 1 //音量: 0-1声音正常，如果倍数放太大，会加剧噪音
}export default class AudioPlay {static play(audioList) {if (!audioList.audio.length) {return;} else {const howl = new Howl({preload: audioConf.preload,src:  [audioList.audio[0]],autoPlay: audioConf.autoPlay,volume: audioConf.volume,});if(!audioList.delay.length) {howl.play();howl.on('end', () => {console.log(`${audioList.audio[0]}播放完毕！`);audioList.audio.splice(0, 1);AudioPlay.play(audioList);})} else {setTimeout(() => {howl.play();}, audioList.delay[0]);audioList.delay.splice(0, 1);howl.on('end', () => {console.log(`${audioList.audio[0]}播放完毕！`);audioList.audio.splice(0, 1);AudioPlay.play(audioList);})}}};
}

使用例子：

import AudioPlay from './audio-play'; //如果是将代码写在html文件中，需要加文件后缀.jsconst audioList = {audio: [1.wav, 2.wav, 3.wav], //音频文件，这里的文件可以是本地的也可以是一个音频网址delay: [100, 1000, 2000]  //延迟播放时间
}AudioPlay.play(audioList);

注意，由于谷歌浏览器对音频播放的限制，一开始音频可能不会自动播放，要用鼠标点击一下屏幕才会触发，而火狐浏览器就不存在这个问题。

JavaScript 播放多条音频与延迟播放相关推荐

怎么隐藏audio播放器的播放进度条，只保留播放按钮？
怎么隐藏audio播放器的播放进度条,只保留播放按钮? 截图在页面最右边的button中嵌套了audio音频播放器,播放器默认的样式有一个播放进度条,导致页面宽度被撑开了,布局被破坏. 第一种: 第 ...
html5 音乐播放进度条,js实现音乐播放控制条
前言 html5中提供audio标签, 该标签实现音频的播放,之前就一直对于音频以及视频播放比较感兴趣,一直想要自己实现一个音频和视频播放的模块,这也是本文章撰写的初衷,最近花了些时间实现了Audio ...
android 实现同时播放多个音频和连续播放多个音频
1,同时播放多个音频 lateinit var mSoundPool: SoundPool var mSoundMap = HashMap<Int, Int>() val audioAtt ...
java 音频倍速播放_Android MediaPlayer 音频倍速播放，调整播放速度
现在市面上的很多音视频App都有倍速播放的功能,例如把播放速度调整为0.5.1.5.2倍等等. 从Android API 23 (Android M)开始,MediaPlayer支持调整播放速度. 使 ...
js 实现连续播放多条音频文件
音频文件数组 var musicArr = new Array('xxx.mp3',xxx1.mp3''); 方法一:[简单粗暴] 直接调用 palyTest(0,musicArr); functio ...
AudioPlayer.js实现限制仅播放一条语音、多条语音顺序播放、自动播放(有限制)、调整语音条长度
AudioPlayer.js实现限制仅播放一条语音.多条语音顺序播放.自动播放(有限制).调整语音条长度使用场景:语音直播,实现点击播放某一条语音,暂停其他播放中的语音.播完一条语音,自动播放下一条 ...
iOS 9音频应用播放音频之控制播放速度
iOS 9音频应用播放音频之控制播放速度 iOS 9音频控制播放速度 iOS9音频文件在播放时是以一定的速度进行的.这个速度是可以进行更改的,从而实现iOS9音频文件的快速播放和慢速播放功能.要实现i ...
使用HTML和css播放视频和音频
使用HTML和css播放视频和音频使用video播放视频使用audio播放音频使用video播放视频 video属性可以给网页加载视频,详细属性见下图不是所有格式的视频都可以被浏览器支持,比如 ...
.net C# 网页播放器支持多种格式媒体播放器播放器代码
.avi格式代码片断如下: <object id='video' width='400' height='200' border='0' classid='clsid:CFCDAA03-8BE ...

JavaScript 播放多条音频与延迟播放

JavaScript 播放多条音频与延迟播放相关推荐

最新文章

热门文章