ブラウザでのインタラクティブな音楽

最近、Web Audio APIを使用してブラウザでサウンドを合成する多くの例があります。 Audiocrawl.coの Webサイトで、この分野の最も興味深いプロジェクトについて知ることができます。

画像

オーディオアプリケーションの作成に使用できるライブラリ/フレームワークは何ですか? MIDI.jsがあります。Githubで検索すると、さらにいくつかの異なる放棄レベルを見つけることができます。

しかし、私はもっと何かが欲しいです:

そして、そのようなライブラリがあります!

これはSSSynthesiser.jsです。 使用例はプロジェクトページにあります。

画像

一般的なイデオロギー




WebGLの使用例


画像

特徴的な機能





コード例


ライブラリ接続:

<script src="SSSynthesiser.js"></script> 

初期化とロード:

 var sssynthesiser = null; var xmlHttpRequest = new XMLHttpRequest(); xmlHttpRequest.open('GET', "http://site/x/sviridovtimeforward.molgav", true); xmlHttpRequest.onload = function () { var o = JSON.parse(xmlHttpRequest.response); sssynthesiser = new SSSynthesiser(o); }; xmlHttpRequest.send(); 

もちろん、 CORSはサイトで構成する必要があります。

再生:

 sssynthesiser.startPlaySong(); 

1つのメモ:

 sssynthesiser.playKey(sssynthesiser.findSampleBySubPath(s),1000,45); 

45はMIDIスケールのノートの高さです。この場合はA3です。 ラ3オクターブ。

和音:

 sssynthesiser.playChord(sssynthesiser.findSampleBySubPath(s),2000,[48,52,55,60,64]); 

48,52,55,60,64は、MIDIスケールのノートの高さです。

JSONファイル形式


例はここにあります 。 イデオロギー的には、 トラッカーファイルに近く、ノートに加えて、サンプリングされた楽器が含まれています。

性能


SSSynthesiser.jsは、 実稼働中にサンプルを直接混合します。 それにもかかわらず、音は非常に弱い電話モデルでもシームレスに合成されます。

デスクトップ/モバイルプラットフォーム上のChrome / Safari / Firefox / Opera / MSEdgeと互換性のある、神のいないIEは確かに飛行しています。

Source: https://habr.com/ru/post/J266145/


All Articles