前端使用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>
<input
type="checkbox"
name="l"
id="lVolCheckBox"
checked="checked"
/>
</td>
<td>
<input
type="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; //设置左声道声音为1
rGain.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>