前端使用AudioContent左右声道切换

直接上代码

<!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 source = null;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.setValueAtTime(((lVol / 100) * vol) / 100,context.currentTime);rGain.gain.setValueAtTime(((rVol / 100) * vol) / 100,context.currentTime);context.resume();}function initSound(arrayBuffer) {context.decodeAudioData(arrayBuffer).then((filestream) => {console.log(filestream);audioBuffer = filestream;var analyser = context.createAnalyser();source = context.createBufferSource();source.buffer = audioBuffer;source.loop = true; //循环播放var splitterNode = context.createChannelSplitter(2); // 创建声道分离处理器var merger = context.createChannelMerger(2); // 创建 合成器source.connect(splitterNode);splitterNode.connect(lGain, 0); //将分离器的 第0个通道给左声道splitterNode.connect(rGain, 1); //将分离器的 第1个通道给右声道lGain.connect(merger, 0, 0); //将左声道的第0个通道 给 合成器的第0个通道rGain.connect(merger, 0, 1); //将右声道的第0个通道 给 合成器的第1个通道merger.connect(analyser);merger.connect(analyser);analyser.fftSize = 512;analyser.connect(context.destination);var bufferLength = analyser.frequencyBinCount;var dataArray = new Uint8Array(bufferLength);var ctx = canvas.getContext("2d");var cwidth = canvas.width;var cheight = canvas.height;var rectWidth = 5;var gap = 2;var minheight = 2;var rectCount = cwidth / (rectWidth + gap);ctx.fillStyle = "rgba(0,0,0,0.5)";var render = function () {analyser.getByteFrequencyData(dataArray);var step = Math.round(dataArray.length / rectCount);ctx.clearRect(0, 0, cwidth, cheight);for (let i = 0; i < rectCount; i++) {let value = dataArray[i * step];ctx.fillRect(i * (rectWidth + gap),cheight - value,rectWidth,value);}requestAnimationFrame(render);};render();});}function loadAudioFile(url) {var xhr = new XMLHttpRequest(); //通过XHR下载音频文件xhr.open("GET", url, true);xhr.responseType = "arraybuffer";xhr.onload = function (e) {//下载完成initSound(this.response);};xhr.send();}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"// "https://s172.123apps.com/ajoiner/d/final_61d68c4ddbc8d.mp3"// "https://djdemo.bjbtf.cn:36110//2016/House/20140825/[House]128bpm_Shameless_Whoomp_Yeahhh_It_Is_[Original_Vs_Booty_Mix]_.mp3""https://s174.123apps.com/aconv/d/s174H4xAUTAl_flv_YfwWoXkC.mp3");document.getElementById("stop").addEventListener("click", function () {context.suspend();});document.getElementById("cont").addEventListener("click", function () {context.resume();});document.getElementById("start").addEventListener("click", function () {source.start(0); //立即播放});};</script>
</html>

前端使用AudioContent左右声道切换相关推荐

Android左右声道切换流程
1./frameworks/base / services/core/java/com/android/server/audio/AudioService.java mMonitorRotation ...
前端组件库自定义主题切换探索-03-webpack-theme-color-replacer webpack 同时替换多个颜色改造
接上一篇<前端组件库自定义主题切换探索-02-webpack-theme-color-replacer webpack 的实现逻辑和原理-02> 这篇我们来开始改造,让这个插件最终能达到我 ...
前端组件库自定义主题切换探索-02-webpack-theme-color-replacer webpack 的实现逻辑和原理-02
接上一篇:<前端组件库自定义主题切换探索-02-webpack-theme-color-replacer webpack 的实现逻辑和原理-01> 上一篇说到,在Handler.js的th ...
教你用Sound Forge声道切换功能编辑音频
现今大多数流行歌曲都会采用立体声设置,让歌曲听起来更为丰满.单声道音频是比较原始的声音通道设置方式,将不同方向的声音都混合在一个声道中,有些单耳听力障碍用户会使用到单声道音频. 而在立体声设置中,有些 ...
node搭建的一个应用在前端项目中的可切换接口的代理服务器
web项目的编写过程当中,常常会出现前后端进度不一致的情况,就像谈恋爱的两个人如果步调不一致,那么肯定会很累,更有甚者因节奏的不一样导致分手的下场,所以为了避免前后端走到"分手"的 ...
android 应用置顶到最前端_Android 将后台应用切换到前台
目录需求分析代码实现需求分析 1.项目中有一个需求,需要调用打开本地安装好的第三方 APP,然后在某个时刻需要将自己的 APP 仍然从后台切换到前端(置顶). 2.效果如下:点击 "开 ...
web前端之DOM操作——Tab切换栏的使用
Tab切换栏的详细解析下面给出京东某一页面的tab栏页面切换: 举例引入:鼠标悬停时,current元素的背景变色本段我们先举一个例子,因为这里用到了排他思想.对于理解tab切换,很有帮助. 完整 ...
【前端积累】点击切换显示内容
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
简易前端路由-点击菜单切换到对应的信息栏
<body><div id="app"><a href="#/zhuye"& ...

前端使用AudioContent左右声道切换

前端使用AudioContent左右声道切换

前端使用AudioContent左右声道切换相关推荐

最新文章

热门文章