AudioContext 无标签播放音频【AudioContext系列一】

html播放音频常用的都是用audio标签,如果不可见用样式隐藏然后用js去控制播放,根据audio提供的能力模拟播放进度等等。

这里介绍一种web Audio API 的方式播放, 代码很简单也很容易理解

 const audioContext = new AudioContext();
 async function play() {
    const  res = await fetch('http://localhost/file/audio.mp3');
    const arraybuffer = await res.arrayBuffer();
    const audioBuffer = await audioContext.decodeAudioData(arraybuffer);
    const source = audioContext.createBufferSource();
    source.connect(audioContext.destination); //连接上实例
    source.buffer = audioBuffer;
    source.start();
 }
 button.addEventListener('click', play, false);

成功播放。
体验地址

发布了77 篇原创文章 · 获赞 5 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/uk_51/article/details/103169291