blocks|key|868547|text|现在，您可以在大多数浏览器中使用Web+Audio+API+(excepting+IE+and+Opera+Mini)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|868548|试试下面的代码：|868549|​|868550|//+one+context+per+document
var+context+=+new+(window.AudioContext+%7C%7C+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+%2B+2);+//+stop+2+seconds+after+the+current+time|code-block|syntax|javascript|868551|868552|如果你想降低音量，你可以这样做：|868553|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+%2B+3);+//+start+it+three+seconds+from+now|868554|我在阅读Web+Audio+API+Working+Draft时，从@brainjam的链接中找到了铬的实验，得到了大部分这些信息。|868555|我希望这能有所帮助。最后，在chrome检查器(ctrl-shift-i)中检查各种对象是非常有用的。|868556|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API|1|http://caniuse.com/#feat=audio-api|2|http://www.w3.org/TR/webaudio/^0|G|D|0|V|R|1|0|0|0|0|0|0|0|4|R|2|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@$A|18|B|19|1|1A]|$A|1B|B|1C|1|1D]]|C|$]]|$1|D|3|E|5|6|7|1E|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1F|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1G|8|@]|9|@]|C|$K|L]]|$1|M|3|G|5|6|7|1H|8|@]|9|@]|C|$]]|$1|N|3|O|5|6|7|1I|8|@]|9|@]|C|$]]|$1|P|3|Q|5|J|7|1J|8|@]|9|@]|C|$K|L]]|$1|R|3|S|5|6|7|1K|8|@]|9|@$A|1L|B|1M|1|1N]]|C|$]]|$1|T|3|U|5|6|7|1O|8|@]|9|@]|C|$]]|$1|V|3|-4|5|6|7|1P|8|@]|9|@]|C|$]]]|W|$X|$5|Y|Z|10|C|$11|12]]|13|$5|Y|Z|10|C|$11|14]]|15|$5|Y|Z|10|C|$11|16]]]]

<p>You can use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API" rel="noreferrer">Web Audio API</a> in most browsers now (<a href="http://caniuse.com/#feat=audio-api" rel="noreferrer">excepting IE and Opera Mini</a>).</p>

<p>Try out this code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// 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</code></pre>
</div>
</div>
</p>

<p>If you want the volume lower, you can do something like this:</p>

<pre><code>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
</code></pre>

<p>I got most of this from experimenting in chromium while reading the <a href="http://www.w3.org/TR/webaudio/" rel="noreferrer">Web Audio API Working Draft</a>, which I found from @brainjam 's link.</p>

<p>I hope that helps. Lastly, it is very helpful to inspect the various objects in the chrome inspector (ctrl-shift-i).</p>


blocks|key|868614|text|这就是我一直想要的样子，最后我成功地做到了我想要的。也许你也会喜欢。带频率和推送开关的简单滑块：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|868615|​|868616|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+%7C%7C+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);
};|code-block|syntax|javascript|868617|<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"+/>|868618|868619|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>This is what I have looked for like forever and in the end I managed to do it myself like I wanted. Maybe you will like it too.
Simple slider with frequency and push on/off:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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);
};</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p class="texts"&gt;Frekvence [Hz]&lt;/p&gt;
&lt;input type="range" id="fIn" min="20" max="20000" step="100" value="1234" oninput="show()" /&gt;
&lt;span id="fOut"&gt;&lt;/span&gt;&lt;br&gt;
&lt;input class="off" type="button" id="btn1" value="Start / Stop" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|651341|text|你可以动态生成wav-e文件并播放(src)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|651342|​|651343|//+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%2Bsize)}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%2B%2B)+{
++++let+f=+Math.min(Math.max(fun(i/SPS,DUR,SPS),0),1);
++++data+%2B=+put(Math.floor(+f+*+(2**(BPS*8)-1)),+BPS);
++}
++
++return+"data:Audio/WAV;base64,"+%2B+btoa(data);
}


var+WAV+=+new+Audio(+genWAVUrl(getSampleAt,5)+);+//+5s
WAV.setAttribute("controls",+"controls");
document.body.appendChild(WAV);
//WAV.play()|code-block|syntax|javascript|651344|651345|这是可视化列表|651346|651347|function+getSampleAt(t,DUR,SPS)
{
++++return+0.5%2BMath.sin(15*t)/(1%2Bt*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%2Bsize)}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%2B%2B)+{
++++let+f=+Math.min(Math.max(fun(i/SPS,DUR,SPS),0),1);
++++data+%2B=+put(Math.floor(+f+*+(2**(BPS*8)-1)),+BPS);
++}
++
++return+"data:Audio/WAV;base64,"+%2B+btoa(data);
}

function+draw(fun,+DUR=1,+NCH=1,+SPS=44100,+BPS=1)+{
++time.innerHTML=DUR%2B'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%2B%2B)+p%2B=+`+${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();|651348|.chart+{+border:+1px+dashed+#ccc;+}
.axis+{+font-size:+0.2px}
audio+{+outline:+none;+}|651349|Click+at+blue+line+(make+volume+to+max):
<svg+class="chart"+id="svgCh"+onclick="changeStart(event)">++++
++<circle+cx="0"+cy="-1"+r="0.05"+style="fill:+rgba(255,0,0,1)"+id="point"></circle>
++<polyline+id="chart"+fill="none"+stroke="#0074d9"+stroke-width="0.01"+points=""/>
++<text+x="0.03"+y="0.9"+class="axis">0</text>
++<text+x="0.03"+y="0.2"+class="axis">1</text>
++<text+x="4.8"+y="0.9"+class="axis"+id="time"></text>
</svg><br>|651350|651351|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/literallylara/7ece1983fab47365108c47119afb51c7^0|I|3|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|D|3|E|5|6|7|17|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|18|8|@]|9|@]|C|$I|J]]|$1|K|3|E|5|6|7|19|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|1A|8|@]|9|@]|C|$]]|$1|N|3|E|5|6|7|1B|8|@]|9|@]|C|$]]|$1|O|3|P|5|H|7|1C|8|@]|9|@]|C|$I|J]]|$1|Q|3|R|5|H|7|1D|8|@]|9|@]|C|$I|J]]|$1|S|3|T|5|H|7|1E|8|@]|9|@]|C|$I|J]]|$1|U|3|E|5|6|7|1F|8|@]|9|@]|C|$]]|$1|V|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]]|W|$X|$5|Y|Z|10|C|$11|12]]]]

<p>You can generate wav-e file in the fly and play it (<a href="https://gist.github.com/literallylara/7ece1983fab47365108c47119afb51c7" rel="nofollow noreferrer">src</a>)</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// 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) =&gt; [(n&lt;&lt;24),(n&lt;&lt;16),(n&lt;&lt;8),n].filter((x,i)=&gt;i&lt;l).map(x=&gt; String.fromCharCode(x&gt;&gt;&gt;24)).join('');
  let p = (...a) =&gt; a.map( b=&gt; 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 &lt; 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()</code></pre>
</div>
</div>
</p>

<p>Here is visualistation </p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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) =&gt; [(n&lt;&lt;24),(n&lt;&lt;16),(n&lt;&lt;8),n].filter((x,i)=&gt;i&lt;l).map(x=&gt; String.fromCharCode(x&gt;&gt;&gt;24)).join('');
  let p = (...a) =&gt; a.map( b=&gt; 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 &lt; 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 &lt; 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();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.chart { border: 1px dashed #ccc; }
.axis { font-size: 0.2px}
audio { outline: none; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>Click at blue line (make volume to max):
&lt;svg class="chart" id="svgCh" onclick="changeStart(event)"&gt;    
  &lt;circle cx="0" cy="-1" r="0.05" style="fill: rgba(255,0,0,1)" id="point"&gt;&lt;/circle&gt;
  &lt;polyline id="chart" fill="none" stroke="#0074d9" stroke-width="0.01" points=""/&gt;
  &lt;text x="0.03" y="0.9" class="axis"&gt;0&lt;/text&gt;
  &lt;text x="0.03" y="0.2" class="axis"&gt;1&lt;/text&gt;
  &lt;text x="4.8" y="0.9" class="axis" id="time"&gt;&lt;/text&gt;
&lt;/svg&gt;&lt;br&gt;</code></pre>
</div>
</div>
</p>


<p>Is it possible to generate a constant sound stream with javascript/html5? For example, to generate a perpetual sine wave, I would have a callback function, that would be called whenever the output buffer is about to become empty:</p>

<pre><code>function getSampleAt(timestep)
{
    return Math.sin(timestep);
}
</code></pre>

<p>(The idea is to use this to make an interactive synth. I don't know in advance how long a key will be pressed, so I can't use a fixed length buffer)</p>


Generating sound on the fly with javascript/html5

有没有可能用javascript/html5生成一个恒定的声音流？例如，为了生成一个永久的正弦波，我将有一个回调函数，该函数将在输出缓冲区即将为空时被调用：function getSampleAt(timestep){    return Math.sin(timestep);}(这个想法是用它来制作一个交互式的syn...

问使用javascript/html5动态生成声音
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用javascript/html5动态生成声音EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用javascript/html5动态生成声音
EN