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);

成功播放。
体验地址

要在前端实现音频合成,可以使用 Web Audio API。以下是一个简单的示例代码: ```javascript // 创建一个新的 AudioContext 对象 const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // 要合成的两个音频文件 const audio1 = 'audio1.mp3'; const audio2 = 'audio2.mp3'; // 加载音频文件 const loadAudio = async (url) => { const response = await fetch(url); const arrayBuffer = await response.arrayBuffer(); return arrayBuffer; }; // 合成音频文件 const mergeAudio = async () => { // 加载音频文件 const audioData1 = await loadAudio(audio1); const audioData2 = await loadAudio(audio2); // 解码音频数据 const audioBuffer1 = await audioCtx.decodeAudioData(audioData1); const audioBuffer2 = await audioCtx.decodeAudioData(audioData2); // 创建一个新的 AudioBuffer 对象 const mergedBuffer = audioCtx.createBuffer( audioBuffer1.numberOfChannels, audioBuffer1.length + audioBuffer2.length, audioBuffer1.sampleRate ); // 将第一个音频文件的数据复制到新的 AudioBuffer 对象中 mergedBuffer.getChannelData(0).set(audioBuffer1.getChannelData(0)); mergedBuffer.getChannelData(1).set(audioBuffer1.getChannelData(1)); // 将第二个音频文件的数据复制到新的 AudioBuffer 对象中 mergedBuffer.getChannelData(0).set(audioBuffer2.getChannelData(0), audioBuffer1.length); mergedBuffer.getChannelData(1).set(audioBuffer2.getChannelData(1), audioBuffer1.length); // 将合成后的音频数据赋值给 Audio 标签进行播放 const audioElement = new Audio(); const mergedData = audioCtx.createBufferSource(); mergedData.buffer = mergedBuffer; mergedData.connect(audioCtx.destination); mergedData.start(); }; // 合成音频文件并播放 mergeAudio(); ``` 在上面的示例代码中,我们首先创建了一个新的 AudioContext 对象。然后,我们加载要合成的两个音频文件,并使用 decodeAudioData() 方法解码它们。接下来,我们创建一个新的 AudioBuffer 对象,将两个音频文件的数据复制到其中,并将其赋值给 Audio 标签的 source 属性,然后开始播放
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值