AudioContext实现同时播放两首音乐在左右音道上

直接上代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>AudioContext实现同时播放两首音乐在左右音道上</title></head><style></style><body><canvas class="canvas" id="canvas" width="400" height="400"></canvas><button id="stop">暂停</button><button id="cont">继续</button><button id="start">开始</button><div class="setAudioVol"><table border="1"><tr><th></th><th>左声道</th><th>右声道</th></tr><tr><td>A1</td><td><inputtype="checkbox"name="l"id="lVolCheckBox"checked="checked"/></td><td><inputtype="checkbox"name="r"id="rVolCheckBox"checked="checked"/></td></tr></table></div>L<input type="range" min="0" max="200" value="100" id="equalizer" />R</body><script>window.onload = function () {const canvas = document.getElementById("canvas");var context = new AudioContext(); // 创建Audio上下文var mergerleft = context.createChannelMerger(2); // 创建 左合成器var mergerright = context.createChannelMerger(2); // 创建 右合成器var AllMerget = context.createChannelMerger(2); //创建 合成器合成左右合成器var lsource = null;var rsource = null;var con = 0;var audioBuffer = null;var lGain = context.createGain(), // 左声道rGain = context.createGain(), // 右声道vol = 100, // 音量lVol = 100, // 左声道rVol = 100; // 右声道lGain.gain.value = 1; //设置左声道声音为1rGain.gain.value = 1;document.getElementById("lVolCheckBox").addEventListener("change", function (e) {console.log(e);if (e.target.checked) {lVol = 100;} else {lVol = 0;}setVolume();});document.getElementById("rVolCheckBox").addEventListener("change", function (e) {console.log(e);if (e.target.checked) {rVol = 100;} else {rVol = 0;}setVolume();});// 声道控制document.getElementById("equalizer").addEventListener("change", function () {lVol = equalizer.value > 100 ? 100 : equalizer.value;rVol = equalizer.value < 100 ? 100 : 200 - equalizer.value;setVolume();});// 设置音量function setVolume() {lGain.gain.value = ((lVol / 100) * vol) / 100;rGain.gain.value = ((rVol / 100) * vol) / 100;context.resume();}function loadAudioFile(url) {return new Promise((res, rej) => {var xhr = new XMLHttpRequest(); //通过XHR下载音频文件xhr.open("GET", url, true);xhr.responseType = "arraybuffer";xhr.onload = function (e) {//下载完成res(this.response);};xhr.send();});}Promise.all([loadAudioFile("https://djdemo.bjbtf.cn:36110//2016/House/20140825/[House]128bpm_Shameless_Whoomp_Yeahhh_It_Is_[Original_Vs_Booty_Mix]_.mp3"),loadAudioFile("https://djdemo.bjbtf.cn:36110//2016/CLUB%E5%95%86%E4%B8%9A/club%E5%A4%96%E6%96%87/20150519/Bpm128_Desireless_Voyage_Voyage_[FuzzDead_Reboot].mp3"),]).then((res) => {Promise.all([context.decodeAudioData(res[0]),context.decodeAudioData(res[1]),]).then((audioData) => {//赋值->拆分->合成->输出lsource = context.createBufferSource();rsource = context.createBufferSource();lsource.buffer = audioData[0];rsource.buffer = audioData[1];let lsplitterNode = context.createChannelSplitter(2);let rsplitterNode = context.createChannelSplitter(2);lsource.connect(lsplitterNode);rsource.connect(rsplitterNode);lsplitterNode.connect(lGain, 0);rsplitterNode.connect(rGain, 1);lGain.connect(mergerleft, 0, 0);rGain.connect(mergerright, 0, 1);mergerleft.connect(AllMerget, 0, 0);mergerright.connect(AllMerget, 0, 1);AllMerget.connect(context.destination);});},(err) => {});document.getElementById("stop").addEventListener("click", function () {context.suspend();});document.getElementById("cont").addEventListener("click", function () {context.resume();});document.getElementById("start").addEventListener("click", function () {lsource.start(0); //立即播放rsource.start(0); //立即播放});};</script>
</html>

AudioContext实现同时播放两首音乐在左右音道上相关推荐

mciSendString 多线程播放多首音乐注意事项
昨天晚上遇到一个问题: 使用 mciSendString 控制播放多首音乐的时候,出现最后一次播放的音乐无法通过 mciSendString ("close mp3") 关闭音乐 ...
java手机音乐_[JavaME]手机同时播放两个音乐探讨一
[JavaME]手机同时播放两个音乐探讨一摘要: 本文档以及后续文档试图一步一步地探讨如何在手机上同时播放两个声音文件,譬如一个是背景音乐,一个是按键触发的游戏音效.请慢慢看下去,我们尽量糅合进各 ...
使用C语言播放一首音乐
播放音乐大家好,我是辰梦! 很久没有写过文章了,在这期间,我写了很多代码,但很多都是别人写的,我想了又想,今天把我觉得比较好的代码给大家分享出来! 相信大家也找了很久的C语言音乐播放器,在这里,我就 ...
java学习之路之播放一首简单的音乐
1.首先,要去网上下载个JMF工具,这个工具可以播放通常情况下的Mp3音乐文件和视频,也叫做Java媒体框架,可以去官网下载JMF官网下载,下载完之后,有个jmf的exe安装文件,双击打开进行安装,安 ...
HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
流行歌单片机c语言编程,单片机6首音乐播放的proteus仿真电路及C语言程序设计...
#define uchar unsigned char //定义一下方便使用 #define uint unsigned int #define ulong unsigned long #inclu ...
实验十：红外遥控简单mp3播放器（2首音乐，只有旋律，播放器雏形）
OK,今天的实验我感觉我可以开发mp3了,哈哈不过,我对音乐了解不多,所以都是简单的设计功能: 1)红外遥控 2)CH-播放<生日快乐> 3)CH+播放<小星星> 4)C ...
软件案例分析——两大音乐软件的PK
项目内容这个作业属于哪个课程软件工程这个作业的要求在哪里软件案例分析我在这个课程的目标是 1. 体验体系化.规范化的软件工程实践流程 2. 锻炼码力. 这个作业在哪个具体方面帮助我实现目标 ...
android小应用，只能播放一首歌的应用
1.上学期,选修课为安卓,要求我们做一个小应用作为安卓的大作业,我就做了一个小小的音乐播放器,实现的功能很少,就是使用Service服务来播放一首音乐,其中用了很多菜单效果,然后主界面实现了一个画廊的 ...

AudioContext实现同时播放两首音乐在左右音道上

AudioContext实现同时播放两首音乐在左右音道上

AudioContext实现同时播放两首音乐在左右音道上相关推荐

最新文章

热门文章