如何解决使用javascript / html5即时生成声音
| 是否可以使用javascript / html5生成恒定的声音流？例如，要生成一个永久的正弦波，我将有一个回调函数，只要输出缓冲区即将变空，就会调用该函数：function getSampleAt(timestep)
{
return Math.sin(timestep);
}
解决方法
使用HTML5音频元素
正如史蒂文·威滕斯（Steven Wittens）在有关创建JavaScript合成器的博客文章中指出的那样，目前无法使用JavaScript和
audio
window.onkeydown = start;
window.onkeyup = stop;
audio
// one context per document
var context = new (window.AudioContext || window.webkitAudioContext)();
var osc = context.createOscillator(); // instantiate an oscillator
osc.type = \'sine\'; // this is the default - also square,sawtooth,triangle
osc.frequency.value = 440; // Hz
osc.connect(context.destination); // connect it to the destination
osc.start(); // start the oscillator
osc.stop(context.currentTime + 2); // stop 2 seconds after the current time
audioCtx = new(window.AudioContext || window.webkitAudioContext)();
show();
function show() {
frequency = document.getElementById(\"fIn\").value;
document.getElementById(\"fOut\").innerHTML = frequency + \' Hz\';
switch (document.getElementById(\"tIn\").value * 1) {
case 0: type = \'sine\'; break;
case 1: type = \'square\'; break;
case 2: type = \'sawtooth\'; break;
case 3: type = \'triangle\'; break;
}
document.getElementById(\"tOut\").innerHTML = type;
volume = document.getElementById(\"vIn\").value / 100;
document.getElementById(\"vOut\").innerHTML = volume;
duration = document.getElementById(\"dIn\").value;
document.getElementById(\"dOut\").innerHTML = duration + \' ms\';
}
function beep() {
var oscillator = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);
gainNode.gain.value = volume;
oscillator.frequency.value = frequency;
oscillator.type = type;
oscillator.start();
setTimeout(
function() {
oscillator.stop();
},duration
);
};frequency
<input type=\"range\" id=\"fIn\" min=\"40\" max=\"6000\" oninput=\"show()\" />
<span id=\"fOut\"></span><br>
type
<input type=\"range\" id=\"tIn\" min=\"0\" max=\"3\" oninput=\"show()\" />
<span id=\"tOut\"></span><br>
volume
<input type=\"range\" id=\"vIn\" min=\"0\" max=\"100\" oninput=\"show()\" />
<span id=\"vOut\"></span><br>
duration
<input type=\"range\" id=\"dIn\" min=\"1\" max=\"5000\" oninput=\"show()\" />
<span id=\"dOut\"></span>
<br>
<button onclick=\'beep();\'>Play</button>
// Legend
// DUR - duration in seconds SPS - sample per second (default 44100)
// NCH - number of channels BPS - bytes per sample
// t - is number from range [0,DUR),return number in range [0,1]
function getSampleAt(t,DUR,SPS)
{
return Math.sin(6000*t);
}
function genWAVUrl(fun,DUR=1,NCH=1,SPS=44100,BPS=1) {
let size = DUR*NCH*SPS*BPS;
let put = (n,l=4) => [(n<<24),(n<<16),(n<<8),n].filter((x,i)=>i<l).map(x=> String.fromCharCode(x>>>24)).join(\'\');
let p = (...a) => a.map( b=> put(...[b].flat()) ).join(\'\');
let data = `RIFF${put(44+size)}WAVEfmt ${p(16,[1,2],[NCH,SPS,NCH*BPS*SPS,[NCH*BPS,[BPS*8,2])}data${put(size)}`
for (let i = 0; i < DUR*SPS; i++) {
let f= Math.min(Math.max(fun(i/SPS,SPS),0),1);
data += put(Math.floor( f * (2**(BPS*8)-1)),BPS);
}
return \"data:Audio/WAV;base64,\" + btoa(data);
}
var WAV = new Audio( genWAVUrl(getSampleAt,5) ); // 5s
WAV.setAttribute(\"controls\",\"controls\");
document.body.appendChild(WAV);
//WAV.play()buttonClickResult = function () {
var button = document.getElementById(\'btn1\');
button.onclick = function buttonClicked() {
if(button.className==\"off\") {
button.className=\"on\";
oscOn ();
}
else if(button.className==\"on\") {
button.className=\"off\";
oscillator.disconnect();
}
}
};
buttonClickResult();
var oscOn = function(){
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
var gainNode = context.createGain ? context.createGain() : context.createGainNode();
//context = new window.AudioContext();
oscillator = context.createOscillator(),oscillator.type =\'sine\';
oscillator.frequency.value = document.getElementById(\"fIn\").value;
//gainNode = createGainNode();
oscillator.connect(gainNode);
gainNode.connect(context.destination);
gainNode.gain.value = 1;
oscillator.start(0);
};<p class=\"texts\">Frekvence [Hz]</p>
<input type=\"range\" id=\"fIn\" min=\"20\" max=\"20000\" step=\"100\" value=\"1234\" oninput=\"show()\" />
<span id=\"fOut\"></span><br>
<input class=\"off\" type=\"button\" id=\"btn1\" value=\"Start / Stop\" />
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。