是否可以使用javascript / html5生成恒定的声音流?例如,为了生成一个永久的正弦波,我会有一个回调函数,只要输出缓冲区即将变空,就会调用它:
function getSampleAt(timestep)
{
return Math.sin(timestep);
}
(我的想法是使用它来制作一个交互式合成器。我事先不知道按键的长度,所以我不能使用固定长度的缓冲区)
答案 0 :(得分:52)
您现在可以在大多数浏览器中使用Web Audio API(excepting IE and Opera Mini)。
试试这段代码:
// 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

如果您希望音量较低,可以执行以下操作:
var context = new webkitAudioContext();
var osc = context.createOscillator();
var vol = context.createGain();
vol.gain.value = 0.1; // from 0 to 1, 1 full volume, 0 is muted
osc.connect(vol); // connect osc to vol
vol.connect(context.destination); // connect vol to context destination
osc.start(context.currentTime + 3); // start it three seconds from now
我在阅读Web Audio API Working Draft时尝试了铬,我从@brainjam的链接中找到了大部分内容。
我希望有所帮助。最后,检查chrome检查器中的各种对象(ctrl-shift-i)非常有用。
答案 1 :(得分:25)
使用JavaScript和audio
元素的跨浏览器生成持续音频目前无法实现,如Steven Wittens notes in a blog post on creating a JavaScript synth:
“......没有办法排队合成音频块以实现无缝播放”。
Web Audio API旨在促进JavaScript音频合成。 Mozilla开发者网络有Web Based Tone Generator,适用于Firefox 4+ [demo 1]。将这两行添加到该代码中,您可以在按键时使用生成的合成器生成持续音频[demo 2 - 仅适用于Firefox 4,首先单击“结果”区域,然后按任意键]:
window.onkeydown = start;
window.onkeyup = stop;
英国广播公司的page on the Web Audio API值得回顾。遗憾的是,对Web Audio API的支持尚未扩展到其他浏览器。
要创建目前的跨浏览器合成器,您可能不得不通过以下方式退回预先录制的音频:
audio
元素中,然后在按键时启动和停止它们。答案 2 :(得分:11)
Web Audio API即将推出Chrome。见http://googlechrome.github.io/web-audio-samples/samples/audio/index.html
按照“入门”中的说明进行操作,然后查看非常令人印象深刻的演示。
更新(2017年):到目前为止,这是一个更加成熟的界面。 API记录在https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
答案 3 :(得分:8)
当然!你可以在这个演示中使用音调合成器:
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>
&#13;
玩得开心!
我从Houshalter那里得到了解决方案: How do I make Javascript beep?
您可以在此处克隆和调整代码: Tone synthesizer demo on JS Bin
答案 4 :(得分:1)
这不是您问题的真正答案,因为您已经要求提供JavaScript解决方案,但您可以使用ActionScript。它应该在所有主流浏览器上运行。
您可以在JavaScript中调用ActionScript函数。
通过这种方式,您可以包装ActionScript声音生成函数并对其进行JavaScript实现。只需使用Adobe Flex构建一个小型swf,然后将其用作JavaScript代码的后端。
答案 5 :(得分:1)
您可以即时生成wav-e文件并播放(src)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
tools:context=".receiver.FilesListingFragment"
>
<android.support.v7.widget.RecyclerView
android:id="@+id/files_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
<ProgressBar xmlns:android="http://schemas.android.com/apk/res/android"
style="@android:style/Widget.Holo.ProgressBar"
android:layout_width="wrap_content"
android:id="@+id/loading"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center" />
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/empty_listing_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:clickable="true"
android:gravity="center"
android:text="No Downloads found.\n Tap to Retry"
android:visibility="gone" />
</RelativeLayout>
这里有视觉提示
// 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(10*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,2],SPS,NCH*BPS*SPS,[NCH*BPS,2],[BPS*8,2])}data${put(size)}`
for (let i = 0; i < DUR*SPS; i++) {
let f= Math.min(Math.max(fun(i/SPS,DUR,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()
function getSampleAt(t,DUR,SPS)
{
return 0.5+Math.sin(15*t)/(1+t*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,2],SPS,NCH*BPS*SPS,[NCH*BPS,2],[BPS*8,2])}data${put(size)}`
for (let i = 0; i < DUR*SPS; i++) {
let f= Math.min(Math.max(fun(i/SPS,DUR,SPS),0),1);
data += put(Math.floor( f * (2**(BPS*8)-1)), BPS);
}
return "data:Audio/WAV;base64," + btoa(data);
}
function draw(fun, DUR=1, NCH=1, SPS=44100, BPS=1) {
time.innerHTML=DUR+'s';
time.setAttribute('x',DUR-0.3);
svgCh.setAttribute('viewBox',`0 0 ${DUR} 1`);
let p='', n=100; // n how many points to ommit
for (let i = 0; i < DUR*SPS/n; i++) p+= ` ${DUR*(n*i/SPS)/DUR}, ${1-fun(n*i/SPS, DUR,SPS)}`;
chart.setAttribute('points', p);
}
function frame() {
let t=WAV.currentTime;
point.setAttribute('cx',t)
point.setAttribute('cy',1-getSampleAt(t))
window.requestAnimationFrame(frame);
}
function changeStart(e) {
var r = e.target.getBoundingClientRect();
var x = e.clientX - r.left;
WAV.currentTime = dur*x/r.width;
WAV.play()
}
var dur=5; // seconds
var WAV = new Audio(genWAVUrl(getSampleAt,dur));
draw(getSampleAt,dur);
frame();
.chart { border: 1px dashed #ccc; }
.axis { font-size: 0.2px}
audio { outline: none; }
答案 6 :(得分:0)
这就是我永远寻找的东西,最后我设法按照自己的意愿去做。也许你也会喜欢它。 带频率的简单滑块和按下开/关:
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);
};
&#13;
<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" />
&#13;