blocks|key|2351747|text|为了在做这类事情时保持理智，你需要在一个专门的线程上做音频处理。更好的是，使用Web+Audio+API，让那些长期考虑这些问题的人来做样本准确性的艰苦工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2351748|也可以查看Web+MIDI+(仅限chrome)。|2351749|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API|1|https://developer.mozilla.org/en-US/docs/Web/API/MIDIAccess^0|13|D|0|0|5|8|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

To maintain any sanity in doing this kind of thing, you're going to want to do the audio processing on a devoted thread. Better yet, use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API" rel="nofollow noreferrer">Web Audio API</a> and let people who have been thinking about these problems for a long time do the hard work of sample-accuracy.

Also check out <a href="https://developer.mozilla.org/en-US/docs/Web/API/MIDIAccess" rel="nofollow noreferrer">Web MIDI</a> (chrome only).

blocks|key|2351868|text|感谢nvioli。我知道Web+Audio+API。然而，我不认为这能在这里有所帮助。我没有直接触发音频:我在曲目中存储了MIDI事件(或者说只是“事件”)。这些事件在任何时刻都会发生。因此，Sequencer需要循环每个节拍持续时间，以扫描在特定节拍播放的内容。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2351869|致敬，丹尼·布洛|2351870|entityMap^0|2|6|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

Thanks nvioli. I'm aware of Web Audio API. However, I don't think that can help here.
I'm not triggering AUDIO directly: I have MIDI events (or let's say just "EVENTS") stored in the TRACKS. And those events happen at any TICK. So the Sequencer needs to loop every Tick Duration to scan what to play at that particular tick.

Regards,
Danny Bullo

blocks|key|2562528|text|在单独的线程中，例如web+worker，您可以创建无限循环。在这个循环中，你需要做的就是计算两个节拍之间的时间。在时间有效后，您可以向主进程发送一条消息，以执行一些视觉效果、播放声音或任何您想要执行的操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2562529|这是一个Working+example|2562530|class+MyWorker+{

++constructor()+{
++++//+Keeps+the+loop+running
++++this.run+=+true
++++//+Beats+per+minute
++++this.bpm+=+120
++++//+Time+last+beat+was+called
++++this.lastLoopTime+=+this.milliseconds
++}

++get+milliseconds()+{
++++return+new+Date().getTime()
++}

++start()+{
++++while+(this.run)+{
++++++//+Get+the+current+time
++++++let+now+=+this.milliseconds
++++++//+Get+the+elapsed+time+between+now+and+the+last+beat
++++++let+updateLength+=+now+-+this.lastLoopTime
++++++//+If+not+enough+time+has+passed+restart+from+the+beginning+of+the+loop
++++++if+(updateLength+<+(1000+*+60)+/+this.bpm)+continue;
++++++//+Enough+time+has+passed+update+the+last+time
++++++this.lastLoopTime+=+now

++++++//+Do+any+processing+that+you+would+like+here

++++++//+Send+a+message+back+to+the+main+thread
++++++postMessage({+msg:+'beat',+time:+now+})

++++}
++}

}

new+MyWorker().start()|code-block|syntax|javascript|2562531|接下来，我们可以创建索引页面，它将运行worker，并在每次从worker返回消息时闪现一个正方形。|2562532|<!DOCTYPE+html>
<html+lang="en">
++<head>
++++<script>
++++++//+Start+the+worker
++++++var+myWorker+=+new+Worker('worker.js')
++++++//+Listen+for+messages+from+the+worker
++++++myWorker.onmessage+=+function+(e)+{
++++++++var+msg+=+e.data
++++++++switch+(msg.msg)+{
++++++++++//+If+the+message+is+a+`beat`+message,+flash+the+square
++++++++++case+'beat':
++++++++++++let+div+=+document.querySelector('div')
++++++++++++div.classList.add('red')
++++++++++++setTimeout(()+=>+div.classList.remove('red'),+100)
++++++++++++break;
++++++++}
++++++}
++++</script>
++++<style>
++++++div+{+width:+100px;+height:+100px;+border:+solid+1px;+}
++++++.red+{+background:+red;+}
++++</style>
++</head>
++<body>
++++<div></div>
++</body>
</html>|2562533|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers|1|http://plnkr.co/edit/jdzZp8on60dKYajpqPem?p=preview^0|A|A|0|0|4|F|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|F|3|G|5|H|7|16|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|17|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|18|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]]]

In a separate thread, such as a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers" rel="nofollow noreferrer">web worker</a>, you can create an endless loop. In this loop, all you need to do is calculate the time between beats. After the time is valid, you can then send a message to the main process, to do some visuals, play a sound or what ever you would like to do.

<h2>Here is a <a href="http://plnkr.co/edit/jdzZp8on60dKYajpqPem?p=preview" rel="nofollow noreferrer">Working example</a></h2>

<pre><code>class MyWorker {

 constructor() {
 // Keeps the loop running
 this.run = true
 // Beats per minute
 this.bpm = 120
 // Time last beat was called
 this.lastLoopTime = this.milliseconds
 }

 get milliseconds() {
 return new Date().getTime()
 }

 start() {
 while (this.run) {
 // Get the current time
 let now = this.milliseconds
 // Get the elapsed time between now and the last beat
 let updateLength = now - this.lastLoopTime
 // If not enough time has passed restart from the beginning of the loop
 if (updateLength &lt; (1000 * 60) / this.bpm) continue;
 // Enough time has passed update the last time
 this.lastLoopTime = now

 // Do any processing that you would like here

 // Send a message back to the main thread
 postMessage({ msg: 'beat', time: now })

 }
 }

}

new MyWorker().start()
</code></pre>

Next we can create the index page, which will run the worker, and flash a square everytime a message comes back from the worker.

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;script&gt;
 // Start the worker
 var myWorker = new Worker('worker.js')
 // Listen for messages from the worker
 myWorker.onmessage = function (e) {
 var msg = e.data
 switch (msg.msg) {
 // If the message is a `beat` message, flash the square
 case 'beat':
 let div = document.querySelector('div')
 div.classList.add('red')
 setTimeout(() =&gt; div.classList.remove('red'), 100)
 break;
 }
 }
 &lt;/script&gt;
 &lt;style&gt;
 div { width: 100px; height: 100px; border: solid 1px; }
 .red { background: red; }
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div&gt;&lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>

blocks|key|2562716|text|滚出我的草坪：你建议的方法并不完全有效。假设我向web+worker添加了一个方法来停止定序器|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2562717|stop()+{
++++this.run+=+false;
}|code-block|syntax|javascript|2562718|问题是方法myWorker.onmessage+=+function+(e)+{...}从未触发过get。我怀疑这是因为Web+Worker线程“太忙”于无休止的循环。有什么办法可以解决这个问题吗？|2562719|此外，当播放时，它works.....but的CPU上升相当多.....唯一可能的解决方案是睡眠()方法，但真正的睡眠在Javascript中不存在...|2562720|谢谢|2562721|entityMap^0|0|7|0|0|5|13|0|1A|6|1I|5|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|14|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|R|$]]

Get Off My Lawn: The approach you suggested does not completely work. Let's say I add a method to the web worker to STOP the Sequencer:

<pre><code>stop() {
 this.run = false;
}
</code></pre>

The problem is that the method myWorker.onmessage = function (e) {...} never get's triggered. I suspect it is because the Web Worker Thread is "TOO BUSY" with the endless loop. any way to solve that?

Also, while playing, it works.....but the CPU goes up considerably..... The only possible Solution would be a Sleep() method, but Real SLEEP that does not exist in Javascript...

Thanks

I'm working on a Javascript Music App that includes a Sequencer. For those who are not familiar, MIDI sequencers work pretty much like this: There is something called PPQ: pulses per quarter note. Each pulse is called "Tick". It depicts how may "subdivisions" there are per quarter note, like resolution. So Sequencers "play" the Events that are in the tracks one Tick at a time: Play Tick1, wait Tick Duration, Play tick2, Tick Duration, and so on.

Now, let's say we have a BPM (Beats per Min) of 120 with PPQ=96 (standard). That means that each Quarter Note Duration is 500ms, and each Tick Duration is 5.20833ms.

What Timer Alternatives we have in Javascript?

1) We have the old setTimeOut. It has several problems: the min. wait time is 4ms. (<a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Minimum_delay_and_timeout_nesting" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Minimum_delay_and_timeout_nesting</a>)
It is also subject to JITTER/time Variations. It is not precise and it is demanding, as call backs are stacked in the even loop.

2) There is an alternative to setTimeOut/setInterval which involves using requestAnimationFrame(). It is VERY precise and CPU efficient. However, the minimum time it can be set is around 16.7ms (the duration of a Frame in a typical 60FPS monitor)

Is there any other Alternative? To to precisely schedule an event every 2-5ms?

Note: the function done in side the loop, playEventsAtTick() is NOT demanding at all, so it would never take more time to execute than Tick Duration.

Thanks!
Danny Bullo

Javascript: Alternative to setTimeOut for FAST Timer in MIDI Sequencer App

我正在开发一个包含序列器的Javascript音乐应用程序。对于那些不熟悉的人，MIDI sequencers的工作原理是这样的:有一种叫做PPQ的东西：pulses per quarter note。每个脉冲被称为“滴答”脉冲()。它描绘了每个季度音符的“细分”，比如分辨率。因此，Sequencer一次一个节拍地“播...

问Javascript: MIDI Sequencer应用程序中快速定时器的setTimeOut替代品
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript: MIDI Sequencer应用程序中快速定时器的setTimeOut替代品EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript: MIDI Sequencer应用程序中快速定时器的setTimeOut替代品
EN