陈华夏资料教程 2020-10-23

SoundJs | Web-Audio-API实现多音频播放

因为HTML5 Audio不支持同时播放多首歌，今天我们主要介绍一下soundjs和Web-Audio-API实现多音频播放的方法，文末还总结了两种实现方式的demo，大家可以依据实际项目情况添加接口。

| 导语再回首-“凤凰传奇邀你唱H5”

`前言`

需求背景：用户选择玲花或曾毅，参与合唱，合唱成功后上传用户录音数据，封装待播放的音频信息（这些部分都是由林雨哥[lennylin]完成的），到落版页请求歌曲进行播放。其中ios微信侧录制音频会屏蔽掉媒体本身的声音，所以ios播放用户合唱歌曲需要同时播放用户录制音频和背景音乐。

（凤凰传奇邀你唱H5）

 createjs.Sound.alternateExtensions = [<span class="hljs-string">"mp3"</span>];
 createjs.Sound.on(<span class="hljs-string">"fileload"</span>, <span class="hljs-keyword">this</span>.loadHandler, <span class="hljs-keyword">this</span>);
 createjs.Sound.registerSound(<span class="hljs-string">"path/to/mySound.ogg"</span>, <span class="hljs-string">"sound"</span>);
 function loadHandler(event) {
     <span class="hljs-keyword">var</span> instance = createjs.Sound.play(<span class="hljs-string">"sound"</span>);  <span class="hljs-comment">// 可使用ID、完整的源路径或event.src。</span>
     instance.on(<span class="hljs-string">"complete"</span>, <span class="hljs-keyword">this</span>.handleComplete, <span class="hljs-keyword">this</span>);
     instance.volume = <span class="hljs-number">0.5</span>;
 }

createjs.Sound.alternateExtensions = ["mp3"];

createjs.Sound.on("fileload", this.loadHandler, this);

createjs.Sound.registerSound("path/to/mySound.ogg", "sound");

function loadHandler(event) {

var instance = createjs.Sound.play("sound"); // 可使用ID、完整的源路径或event.src。

instance.on("complete", this.handleComplete, this);

instance.volume = 0.5;

}

多音频播放：

sounds.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span></span><span class="hljs-function"> (</span><span class="hljs-function"><span class="hljs-params">sound</span></span><span class="hljs-function">) </span>{
      createjs.Sound.alternateExtensions = [<span class="hljs-string">"mp3"</span>];
      createjs.Sound.registerSound(sound.src, sound.id);
      <span class="hljs-keyword">var</span> promise = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-keyword">function</span></span><span class="hljs-function"> (</span><span class="hljs-function"><span class="hljs-params">resolve, reject</span></span><span class="hljs-function">) </span>{ 
            createjs.Sound.on(<span class="hljs-string">"fileload"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span></span><span class="hljs-function"> (</span><span class="hljs-function"><span class="hljs-params">event</span></span><span class="hljs-function">) </span>{
                <span class="hljs-keyword">if</span> (sound.id == event.id) {
                        resolve(createjs.Sound.play(event.id))
                }
            })
       })
      promises.push(promise)
 })
 <span class="hljs-keyword">return</span> <span class="hljs-built_in">Promise</span>.all(promises)

sounds.forEach(function (sound) {

createjs.Sound.alternateExtensions = ["mp3"];

createjs.Sound.registerSound(sound.src, sound.id);

var promise = new Promise(function (resolve, reject) {

createjs.Sound.on("fileload", function (event) {

if (sound.id == event.id) {

resolve(createjs.Sound.play(event.id))

}

})

promises.push(promise)

})

return Promise.all(promises)

值得注意的是，当sound.src是一个会重定向的音频地址，需要先获得重定向后的真实地址，再注册音频。回顾我们的需求，落版页听录制歌曲的时候，我们需要拿用户openid去请求服务器端的php文件，服务器会重定向到一个具体的mp3地址，代码片段如下：

<span class="hljs-selector-tag">createjs</span><span class="hljs-selector-class">.Sound</span><span class="hljs-selector-class">.registerSound</span>(<span class="hljs-string">'xxx.php?openid=xxx'</span>, <span class="hljs-string">'userMp3'</span>); ×
<span class="hljs-selector-tag">createjs</span><span class="hljs-selector-class">.Sound</span><span class="hljs-selector-class">.registerSound</span>(request.responseURL, <span class="hljs-string">'userMp3'</span>);  √

createjs.Sound.registerSound('xxx.php?openid=xxx', 'userMp3'); ×

createjs.Sound.registerSound(request.responseURL, 'userMp3'); √

先看一下readyState几种状态

0	`UNSENT` (未打开)	`open()`方法还未被调用.
1	`OPENED` (未发送)	`open()`方法已被调用.
2	HEADERS_RECEIVED (已获取响应头)	`send()`方法已经被调用, 响应头和响应状态已经返回.
3	LOADING (正在下载响应体)	响应体下载中
4	DONE (请求完成)	整个请求过程已经完毕.

当状态为HEADERS_RECEIVED时可以拿到多次重定向后的最终 URL 并终止请求

</code><code class="hljs kotlin"><span class="hljs-keyword">if</span></code><code class="hljs kotlin"> (<span class="hljs-keyword">this</span>.readyState == <span class="hljs-keyword">this</span>.HEADERS_RECEIVED) {         
     createjs.Sound.registerSound(request.responseURL, sound.id);
     <span class="hljs-keyword">this</span>.abort();                        
}

</code><code class="hljs kotlin">if</code><code class="hljs kotlin"> (this.readyState == this.HEADERS_RECEIVED) {

createjs.Sound.registerSound(request.responseURL, sound.id);

this.abort();

}

注意：如果在初始化音频的时候再去发request请求，会导致微信侧播放异常，所以提前获取音频真实地址，在回调里面再执行音频初始化。

当点击恢复音频播放时需要考虑是否所有音频都已经播放完成，如果是则调用play(),否则仅仅设置paused的状态为false。因为这个时候短音频可能已经播放完成，长音频未播放完成并处于暂停状态，如果不判断直接调用play(),短音频会重新开始播放。

playAll(){
        <span class="hljs-keyword">let</span> allFinished = <span class="hljs-literal">false</span>;
        <span class="hljs-keyword">this</span>.sounds.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span></span><span class="hljs-function"> (</span><span class="hljs-function"><span class="hljs-params">sound</span></span><span class="hljs-function">) </span>{
            allFinished = sound.playState !== <span class="hljs-string">'playFinished'</span> ? <span class="hljs-literal">false</span> : <span class="hljs-literal">true</span>;
        });
        <span class="hljs-keyword">this</span>.sounds.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span></span><span class="hljs-function">(</span><span class="hljs-function"><span class="hljs-params">sound</span></span><span class="hljs-function">)</span>{
            <span class="hljs-keyword">if</span>(allFinished){
                sound.play();
            }<span class="hljs-keyword">else</span>{
                sound.paused = <span class="hljs-literal">false</span>;
            }
        });
    }

playAll(){

let allFinished = false;

this.sounds.forEach(function (sound) {

allFinished = sound.playState !== 'playFinished' ? false : true;

});

this.sounds.forEach(function(sound){

if(allFinished){

sound.play();

}else{

sound.paused = false;

}

});

}

2. Web-Audio-API多音频播放

仔细分析soundjs源码，你会发现它对音频的操作其实是基于强大的Web-Audio-API，而且大多数浏览器都支持Web-Audio-API，我们完全可以用它实现一个简单的音频播放器，不再依赖任何接口文件。

2.1 常用的接口：

AudioContext	音频上下文控制其包含节点的创建、处理和解码，使用其他接口之前需创建一个音频上下文
AudioNode	音频节点
AudioBuffer	音频数据对象可以通过AudioContext.createBuffer 来创建或者通过 AudioContext.decodeAudioData成功解码音轨后获取.
AudioBufferSourceNode	`含有音频源的音频节点,它是用AudioBuffer对象来播放音频数据` `可以通过createBufferSource()` 方法创建方法：AudioBufferSourceNode.start() AudioBufferSourceNode.stop() 事件：ended
ended	音频播放停止时触发

2.2 创建单音频播放

</code><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span></span></code><code class="hljs javascript"> <span class="hljs-function"><span class="hljs-title">playSound</span></span><span class="hljs-function">(</span><span class="hljs-function"><span class="hljs-params">buffer</span></span><span class="hljs-function">)</span>{    
    <span class="hljs-keyword">var</span> context = <span class="hljs-keyword">new</span> (<span class="hljs-built_in">window</span>.AudioContext || <span class="hljs-built_in">window</span>.webkitAudioContext)(),
    source = context.createBufferSource();
    source.buffer = buffer;<span class="hljs-comment">//  告诉音频源 播放哪一段音频</span>
    source.connect(context.destination);<span class="hljs-comment">// 连接到输出源</span>
    source.start(<span class="hljs-number">0</span>);<span class="hljs-comment">//开始播放</span>
}

</code><code class="hljs javascript">function</code><code class="hljs javascript"> playSound(buffer){

var context = new (window.AudioContext || window.webkitAudioContext)(),

source = context.createBufferSource();

source.buffer = buffer;// 告诉音频源播放哪一段音频

source.connect(context.destination);// 连接到输出源

source.start(0);//开始播放

}

定义音频上下文需注意：webkit内核的浏览器需要带webkit前缀（webkitAudioContext）

2.3 多音频播

opts = [{ id: <span class="hljs-string">'1mp3'</span>, url: <span class="hljs-string">'mp3/select_1_1.mp3'</span> },{ id: <span class="hljs-string">'2mp3'</span>, url: <span class="hljs-string">'mp3/select_0_1.mp3'</span> } ]
opts.<span class="hljs-keyword">forEach</span>(opt =&gt; {
     <span class="hljs-keyword">var</span> request = <span class="hljs-keyword">new</span> XMLHttpRequest();
     <span class="hljs-keyword">var</span> context = <span class="hljs-keyword">new</span> (window.AudioContext || window.webkitAudioContext)();                   
     <span class="hljs-keyword">self</span>.sounds[opt.id] = <span class="hljs-keyword">new</span> Sound(opt.id, opt.url, context);
     request.open(<span class="hljs-string">'GET'</span>, opt.url, <span class="hljs-keyword">true</span>);
     request.responseType = <span class="hljs-string">'arraybuffer'</span>;
     <span class="hljs-keyword">var</span> p = <span class="hljs-keyword">new</span> Promise(<span class="hljs-function"><span class="hljs-keyword">function</span></span><span class="hljs-function"> <span class="hljs-params">(</span></span><span class="hljs-function"><span class="hljs-params">resolve, reject</span></span><span class="hljs-function"><span class="hljs-params">)</span> </span>{
         <span class="hljs-comment">//下面就是对音频文件的异步解析</span>
         request.onload = <span class="hljs-function"><span class="hljs-keyword">function</span></span><span class="hljs-function"> <span class="hljs-params">(</span></span><span class="hljs-function"><span class="hljs-params">)</span> </span>{
            context.decodeAudioData(request.response, <span class="hljs-function"><span class="hljs-keyword">function</span></span><span class="hljs-function"> <span class="hljs-params">(</span></span><span class="hljs-function"><span class="hljs-params">buffer</span></span><span class="hljs-function"><span class="hljs-params">)</span> </span>{
              <span class="hljs-keyword">self</span>.sounds[opt.id].setBuffer(buffer);
              <span class="hljs-keyword">self</span>.sounds[opt.id].setEnd(<span class="hljs-number">0</span>);
              resolve(<span class="hljs-keyword">self</span>.sounds[opt.id]);
            }, <span class="hljs-function"><span class="hljs-keyword">function</span></span><span class="hljs-function"> <span class="hljs-params">(</span></span><span class="hljs-function"><span class="hljs-params">err</span></span><span class="hljs-function"><span class="hljs-params">)</span> </span>{
            reject(err);
         });
         };
      });
      request.send();
      promises.push(p);
});

opts = [{ id: '1mp3', url: 'mp3/select_1_1.mp3' },{ id: '2mp3', url: 'mp3/select_0_1.mp3' } ]

opts.forEach(opt => {

var request = new XMLHttpRequest();

var context = new (window.AudioContext || window.webkitAudioContext)();

self.sounds[opt.id] = new Sound(opt.id, opt.url, context);

request.open('GET', opt.url, true);

request.responseType = 'arraybuffer';

var p = new Promise(function (resolve, reject) {

//下面就是对音频文件的异步解析

request.onload = function () {

context.decodeAudioData(request.response, function (buffer) {

self.sounds[opt.id].setBuffer(buffer);

self.sounds[opt.id].setEnd(0);

resolve(self.sounds[opt.id]);

}, function (err) {

reject(err);

});

};

});

request.send();

promises.push(p);

});

一个 AudioBufferSourceNode 只能被播放一次，每次调用 start() 之后，如果还想再播放一遍同样的声音，那么就需要再创建一个 AudioBufferSourceNode，如果想要多次播放声音，需要保留音频播放上下文和音频数据，这里可以定义一个class，初始化每个音频的id，url地址，buffer数据以及音频上下文等等。

</code><code class="hljs kotlin"><span class="hljs-class"><span class="hljs-keyword">class</span></span></code><code class="hljs kotlin"> <span class="hljs-class"><span class="hljs-title">Sound</span></span> {
<span class="hljs-comment">//音频id，音频url，音频播放上下文</span>
    <span class="hljs-keyword">constructor</span>(id, url, context) {
        <span class="hljs-keyword">this</span>.id = id;
        <span class="hljs-keyword">this</span>.url = url;
        <span class="hljs-keyword">this</span>.context = context;
        <span class="hljs-keyword">this</span>.endState = <span class="hljs-number">0</span>;
    }
<span class="hljs-comment">//设置音频数据</span>
    setBuffer(buf) {
        <span class="hljs-keyword">this</span>.buffer = buf;
    }
<span class="hljs-comment">//定义音频播放完成事件</span>
    setEnd(end) {
        <span class="hljs-keyword">this</span>.endState = end;
    }
    on(event, callback) {
        <span class="hljs-keyword">this</span>.events[event] = callback;
    }
<span class="hljs-comment">//音频播放事件</span>
    play() {        
    }
<span class="hljs-comment">//音频暂停事件</span>
    pause() {        
    }
}

</code><code class="hljs kotlin">class</code><code class="hljs kotlin"> Sound {

//音频id，音频url，音频播放上下文

constructor(id, url, context) {

this.id = id;

this.url = url;

this.context = context;

this.endState = 0;

}

//设置音频数据

setBuffer(buf) {

this.buffer = buf;

}

//定义音频播放完成事件

setEnd(end) {

this.endState = end;

}

on(event, callback) {

this.events[event] = callback;

}

//音频播放事件

play() {

}

//音频暂停事件

pause() {

}

2.4 音频暂停、播放

<span class="hljs-keyword">if</span> ( context.state === <span class="hljs-string">'running'</span>) {               
          context.suspend().<span class="hljs-keyword">then</span>(<span class="hljs-function"><span class="hljs-keyword">function</span></span><span class="hljs-function"> <span class="hljs-params">(</span></span><span class="hljs-function"><span class="hljs-params">)</span></span> {
                 console.log(<span class="hljs-string">'Resume context'</span>);
           });           
 } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (context.state === <span class="hljs-string">'suspended'</span>) {           
         context.<span class="hljs-built_in">resume</span>().<span class="hljs-keyword">then</span>(<span class="hljs-function"><span class="hljs-keyword">function</span></span><span class="hljs-function"> <span class="hljs-params">(</span></span><span class="hljs-function"><span class="hljs-params">)</span></span> {
                console.log(<span class="hljs-string">'Suspend context'</span>);
          });            
 }

if ( context.state === 'running') {

context.suspend().then(function () {

console.log('Resume context');

});

} else if (context.state === 'suspended') {

context.resume().then(function () {

console.log('Suspend context');

});

}

2.5 音频播放结束

绑定音频播放结束事件

sound.on(<span class="hljs-string">'ended'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span></span><span class="hljs-function"> <span class="hljs-params">(</span></span><span class="hljs-function"><span class="hljs-params">)</span></span> {
       sound.setEnd(<span class="hljs-number">1</span>);
 })

sound.on('ended', function () {

sound.setEnd(1);

})

综上所述，当对音频点击操作时，需要先判断音频播放状态，如果正在播放则直接暂停；如果已经暂停并且没有播放结束，那么执行恢复操作resume()；如果音频已经播放完成，则需要再创建一个 AudioBufferSourceNode，重新绑定context、buffer等信息

<span class="hljs-keyword">if</span>(<span class="hljs-keyword">this</span>.context.state === <span class="hljs-string">'running'</span> &amp;&amp; <span class="hljs-keyword">this</span>.endState === <span class="hljs-number">0</span>){
      <span class="hljs-keyword">this</span>.context.suspend();
}
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.context.state === <span class="hljs-string">'suspended'</span> &amp;&amp; <span class="hljs-keyword">this</span>.endState === <span class="hljs-number">0</span>) {
      <span class="hljs-keyword">this</span>.context.resume();
}
<span class="hljs-keyword">else</span>{
      <span class="hljs-keyword">this</span>.source = <span class="hljs-keyword">this</span>.context.createBufferSource();
      <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.events.ended) {
          <span class="hljs-keyword">this</span>.source.onended = <span class="hljs-keyword">this</span>.events.ended;
      }
      <span class="hljs-keyword">this</span>.source.buffer = <span class="hljs-keyword">this</span>.buffer;<span class="hljs-comment">//  告诉音频源 播放哪一段音频</span>
      <span class="hljs-keyword">this</span>.source.connect(<span class="hljs-keyword">this</span>.context.destination);<span class="hljs-comment">// 连接到输出源</span>
      <span class="hljs-keyword">this</span>.source.start(<span class="hljs-number">0</span>);<span class="hljs-comment">//开始播放</span>
      <span class="hljs-keyword">this</span>.endState = <span class="hljs-number">0</span>;
}

if(this.context.state === 'running' && this.endState === 0){

this.context.suspend();

}

else if (this.context.state === 'suspended' && this.endState === 0) {

this.context.resume();

}

else{

this.source = this.context.createBufferSource();

if (this.events.ended) {

this.source.onended = this.events.ended;

}

this.source.buffer = this.buffer;// 告诉音频源播放哪一段音频

this.source.connect(this.context.destination);// 连接到输出源

this.source.start(0);//开始播放

this.endState = 0;

}

3. 音频播放进度条实现

svg的stroke-dasharray属性：stroke-dasharray=”0,10000″，其中第一个属性是虚线宽度，第二个是虚线之间间隔，保证第二个属性大于圆形周长即可，然后动态改变第一个属性值，即可实现音乐播放进度条，其中第一个属性值是圆周长*idx / 100。

<span class="hljs-function"><span class="hljs-keyword">function</span></span> <span class="hljs-function"><span class="hljs-title">draw</span></span><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-function"><span class="hljs-params">)</span> </span>{
        <span class="hljs-keyword">if</span> (idx &lt; <span class="hljs-number">101</span>) {
            inside.attr(<span class="hljs-string">"stroke-dasharray"</span>, <span class="hljs-string">""</span> + circleLength * idx / <span class="hljs-number">100</span> + <span class="hljs-string">",10000"</span>);
            idx++;
        } <span class="hljs-keyword">else</span> {
            <span class="hljs-keyword">if</span> (inter)
            clearInterval(inter);
            inter = <span class="hljs-literal">null</span>;
            idx = <span class="hljs-number">1</span>;
            btnEnd.show();
            btnStop.hide();
            btnStart.hide();            
        }
}

function draw() {

if (idx < 101) {

inside.attr("stroke-dasharray", "" + circleLength * idx / 100 + ",10000");

idx++;

} else {

if (inter)

clearInterval(inter);

inter = null;

idx = 1;

btnEnd.show();

btnStop.hide();

btnStart.hide();

}

值得注意的是，如果是多首歌曲同时播放，需要考虑歌曲的最大时长来设置进度条速度，代码片段如下：

allSound.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span></span> (sound, <span class="hljs-built_in">index</span>) {
       durations.push(sound.duration);
       <span class="hljs-keyword">if</span> (sound.duration &gt; duration) {
              duration = sound.duration;
              i = <span class="hljs-built_in">index</span>;
       }
 });
space = Math.<span class="hljs-built_in">max</span>(...durations) / <span class="hljs-number">100</span>;

allSound.forEach(function (sound, index) {

durations.push(sound.duration);

if (sound.duration > duration) {

duration = sound.duration;

i = index;

}

});

space = Math.max(...durations) / 100;

总结

1. soundjs实现的音频播放

调用方法：

<span class="hljs-keyword">var</span> mSrc = [{
    <span class="hljs-attr">id</span>:<span class="hljs-string">"firstMp3"</span>,<span class="hljs-attr">src</span>:<span class="hljs-string">"//game.gtimg.cn/images/hx/act/a20180305song/assets/select_1_1.mp3"</span>},{<span class="hljs-attr">id</span>:<span class="hljs-string">"secondMp3"</span>,<span class="hljs-attr">src</span>:<span class="hljs-string">"//game.gtimg.cn/images/hx/act/a20180305song/assets/select_0_1.mp3"</span>
}];
playSound.init(mSrc);<span class="hljs-comment">//初始化</span>
$(<span class="hljs-string">'.pop_disk'</span>).on(<span class="hljs-string">"click"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span></span><span class="hljs-function"> (</span><span class="hljs-function">) </span>{
    <span class="hljs-keyword">if</span> (playSound.sound.longest.playState !== <span class="hljs-string">'playFinished'</span> &amp;&amp; playSound.sound.longest.paused == <span class="hljs-literal">false</span>) {
        playSound.stopDraw();
        playSound.sound.pauseAll();
        btnStart.hide();
        btnStop.show();
    } <span class="hljs-keyword">else</span> {
        playSound.startDraw();
        playSound.sound.playAll();
        btnStart.show();
        btnStop.hide();
    }
    btnEnd.hide();
})

var mSrc = [{

id:"firstMp3",src:"//game.gtimg.cn/images/hx/act/a20180305song/assets/select_1_1.mp3"},{id:"secondMp3",src:"//game.gtimg.cn/images/hx/act/a20180305song/assets/select_0_1.mp3"

}];

playSound.init(mSrc);//初始化

$('.pop_disk').on("click", function () {

if (playSound.sound.longest.playState !== 'playFinished' && playSound.sound.longest.paused == false) {

playSound.stopDraw();

playSound.sound.pauseAll();

btnStart.hide();

btnStop.show();

} else {

playSound.startDraw();

playSound.sound.playAll();

btnStart.show();

btnStop.hide();

}

btnEnd.hide();

})

2. Web-Audio-API实现的音频播放

http://hx.qq.com/act/a20180305song/test.html

（AudioContext）

Web-Audio-API调用方法：

<span class="hljs-keyword">var</span> index = <span class="hljs-number">0</span>,idValue = <span class="hljs-number">0</span>, duration = <span class="hljs-number">0</span>, durations = [];
AwesomeSound.load([
    { id: <span class="hljs-string">'1mp3'</span>, url: <span class="hljs-string">'//game.gtimg.cn/images/hx/act/a20180305song/assets/select_1_1.mp3'</span> },
    { id: <span class="hljs-string">'2mp3'</span>, url: <span class="hljs-string">'//game.gtimg.cn/images/hx/act/a20180305song/assets/select_0_1.mp3'</span> }
]).then(<span class="hljs-function"><span class="hljs-keyword">function</span></span><span class="hljs-function"> <span class="hljs-params">(</span></span><span class="hljs-function"><span class="hljs-params">sounds</span></span><span class="hljs-function"><span class="hljs-params">)</span> </span>{
    sounds.<span class="hljs-keyword">forEach</span>(<span class="hljs-function"><span class="hljs-keyword">function</span></span><span class="hljs-function"> <span class="hljs-params">(</span></span><span class="hljs-function"><span class="hljs-params">sound, i</span></span><span class="hljs-function"><span class="hljs-params">)</span> </span>{
        durations.push(sound.buffer.duration);
        <span class="hljs-keyword">if</span> (sound.buffer.duration &gt; duration) {
            duration = sound.buffer.duration;
            index = i;
            idValue = sound.id;
        }
        sounds[index].on(<span class="hljs-string">'ended'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span></span><span class="hljs-function"> <span class="hljs-params">(</span></span><span class="hljs-function"><span class="hljs-params">)</span> </span>{
            sound.setEnd(<span class="hljs-number">1</span>);
            playmp3.html(<span class="hljs-string">"点击再次播放"</span>);
        })
        sound.play();
    });
});
playmp3.click(<span class="hljs-function"><span class="hljs-keyword">function</span></span><span class="hljs-function"> <span class="hljs-params">(</span></span><span class="hljs-function"><span class="hljs-params">)</span> </span>{
    <span class="hljs-keyword">var</span> playState = AwesomeSound.getState(idValue);            
    <span class="hljs-keyword">if</span> (playState === <span class="hljs-string">'running'</span>) {
        playmp3.html(<span class="hljs-string">"暂停播放"</span>);
    }
    <span class="hljs-keyword">else</span> {
        playmp3.html(<span class="hljs-string">"正在播放"</span>);
    }
    AwesomeSound.playALL();
});

var index = 0,idValue = 0, duration = 0, durations = [];

AwesomeSound.load([

{ id: '1mp3', url: '//game.gtimg.cn/images/hx/act/a20180305song/assets/select_1_1.mp3' },

{ id: '2mp3', url: '//game.gtimg.cn/images/hx/act/a20180305song/assets/select_0_1.mp3' }

]).then(function (sounds) {

sounds.forEach(function (sound, i) {

durations.push(sound.buffer.duration);

if (sound.buffer.duration > duration) {

duration = sound.buffer.duration;

index = i;

idValue = sound.id;

}

sounds[index].on('ended', function () {

sound.setEnd(1);

playmp3.html("点击再次播放");

})

sound.play();

});

playmp3.click(function () {

var playState = AwesomeSound.getState(idValue);

if (playState === 'running') {

playmp3.html("暂停播放");

}

else {

playmp3.html("正在播放");

}

AwesomeSound.playALL();

});

技术研究by 米小毛

原文地址：https://tgideas.qq.com/gicp/news/475/6594222.html?from=list

打赏赞

H5 创意视频前端技术

duration	音频时长
volume	音量
playState	音频播放状态：playFinished \| playSucceeded
paused	s.paused = true 设置音频暂停
startTime	音频开始播放时间点
loop	音频循环次数

SoundJs | Web-Audio-API实现多音频播放

`前言`

目录

1. soundjs多音频播放

2. Web-Audio-API多音频播放

总结

play()	音频播放
stop()	音频暂停播放，重置播放位置为0，如果想保留播放位，可以使用sound.paused = true

complete	音频播放完成
succeeded	回放成功时触发

前言

目录

1. soundjs多音频播放

2. Web-Audio-API多音频播放

总结

相关推荐

`前言`