Крошечный генератор мелодий на JS — как он устроен

[Alexey2005]

К сожалению, звуковые API в браузерах настолько убоги, что ими попросту невозможно пользоваться. Вот к примеру, вы заметили, какая большая задержка возникает при нажатии на кнопку «Play» в приведённых примерах? И она будет ещё больше, если запускать на смартфоне.
А всё потому, что весь трек требуется генерировать целиком — не существует простого и удобного способа сгенерировать скажем 2 секунды, и потом просто обеспечивать ротацию данных в буфере по мере их исчерпания.
Забавно, что самый простой и удобный способ решения проблемы, это… запуск Flash-апплета, в котором и будет идти работа со звуком! Потому что там это решается

вот так просто

var mySound:Sound = new Sound(); 
mySound.addEventListener(SampleDataEvent.SAMPLE_DATA, sineWaveGenerator); 
mySound.play(); 
function sineWaveGenerator(event:SampleDataEvent):void 
{ 
    for (var i:int = 0; i < 8192; i++) 
    { 
        var n:Number = Math.sin((i + event.position) / Math.PI / 4); 
        event.data.writeFloat(n); 
        event.data.writeFloat(n); 
    } 
}

Как видим даже на таком простейшем примере, бразуерное API (и не только звуковое, а вообще всё) — это лютое костыльное дерьмище, где любая элементарная задача решается через одно место, тоннами кода.
А когда до разработчиков доходит, что получившаяся груда костылей неюзабельна, они просто кидают сверху ещё пачку (в данном случае Media Source Extensions), от чего лучше не становится.
Насколько хорош Flash для работы с любым мультимедиа-контентом и для разработки игр, настолько же отвратительно браузерное API. Конечно, часть дыр затыкается готовыми библиотеками, код которых занимает сотни килобайт и использует множество грязных трюков и хаков, однако оно всё равно тормозит и обладает далеко не идеальной переносимостью между устройствами.

[BerkutEagle]

Чем же Вам Media Source Extensions не угодил? AudioBufferSourceNode позволяет генерировать сигнал любой формы (свойство loop позволит его зациклить). Смешать звук из нескольких источников — тоже не проблема. Писать код конечно придётся, но ведь это же браузер, а не профессиональный софт для работы со звуком. Чем выше уровень API, тем уже круг решаемых им задач. По моему мнению, текущая реализация Media Source Extensions очень даже ничего.

[ZvoogHub]

К сожалению, звуковые API в браузерах настолько убоги

— это абсолютно неверное утверждение

Web Audio API поддерживается браузерами почти 10 лет. Он включает в себя всё что нужно.

А всё потому, что весь трек требуется генерировать целиком — не существует простого и удобного способа сгенерировать скажем 2 секунды

— вот простой пример. Можно тыкнуть Play и покрутить ручки чтоб убедиться что звук генерируется и меняется в рилтайме. Причём и эквалайзер, и копрессор, и реверберация реализуются стандартными средствами Web Audio API.

[printf]

не существует простого и удобного способа сгенерировать скажем 2 секунды, и потом просто обеспечивать ротацию данных в буфере по мере их исчерпания

Существует же, в я том году на js13k именно так сделал. Ссылки: код, работающая игра.

(Код выглядит как моя жизнь, но это хакатон, весь звук делался за день на коленке.)