坑:wx.createInnerAudioContext
警示:微信中定段播放音频,就我目前了解到的,是个大坑,大家需要及时避让!!! (能直接使用分段的音频就分段吧)
this.audioContext = wx.createInnerAudioContext全局一定执行一次就够了,包括实例对象的回调监听.全局只要执行一次!!! 因为多次调用的话,即使你destroy了, 回调事件依旧会以各种诡异的姿势触发你的方法,令你痛不欲生,怀疑人生(这上边我已经哭了三天).
调用了onUpdateTime更是我的痛苦地狱. 在基础库2.6.2到最近的2.8.3当音频是0S开始播放的时候这个方法居然不能回调!!! 我的天,这么大的bug,这么明显的bug,怀疑... 更有甚者该方法在开发工具上能直接把我的电脑内存吃满,电脑风扇转的哇哇哇的(8G虽然也不是很大),所以尽量避让该方法
这时候我就想起了我可爱的原生js,在分段处理音频上真是好啊
/*
* @Description: This is a description
* @Author: Ask
* @LastEditors: Ask
* @Date: 2019-06-08 13:49:33
* @LastEditTime: 2019-09-21 17:33:21
*/
// 使用 Web Audio API
const AudioContext = window.AudioContext
|| window.webkitAudioContext
|| window.mozAudioContext
|| window.oAudioContext
|| window.msAudioContext;
export const hasWebAudioAPI = {
data: !!AudioContext && window.location.protocol.indexOf('http') !== -1,
};
export const music = {};
(() => {
if (!hasWebAudioAPI.data) {
return;
}
const url = './book.mp3'; // 换成自己的音乐
const context = new AudioContext();
const req = new XMLHttpRequest();
req.open('GET', url, true);
req.responseType = 'arraybuffer';
req.onload = (res) => {
console.log(res);
context.decodeAudioData(
req.response,
(buf) => {
// 将拿到的audio解码转为buffer
const getSource = () => {
// 创建source源。
const source = context.createBufferSource();
source.buffer = buf;
source.connect(context.destination);
return source;
};
music.start = (start, length) => {
if (length) {
getSource().start(0, start, length);
} else {
getSource().start(0, start);
}
};
},
(error) => {
if (window.console && window.console.error) {
window.console.error(`音频: ${url} 读取错误`, error);
hasWebAudioAPI.data = false;
}
},
);
};
req.send();
})();
import { music } from './music';
music.start(0,4.524); // 参数认为是开始时间点,持续时间
原生的定段音频播放是真香啊~
