400 musical instruments for Javascript
WebAudioFont is a new technology similar to DLS , but intended for use in Javascript web applications.
Currently allows the use of 400 (four hundred) musical instruments to play sound or generated music.
In essence, WebAudioFont is a set of Javascript files that contain an array of audio data and a description of synthesis rules ( AHDSR , frequency, etc.).
To play using the player based on Web Audio API . All the features of the Web Audio API are available for the instruments used - you can connect filters, smoothly change the volume and frequency, add echo, etc. The sound is synthesized according to the Wavetable principle.
')
Minimum code to play sound:
Get about this page .
More about the code:
- connect the player WebAudioFontPlayer.js
- we connect the selected instrument from the file 32.0.Accoustic_32Bsaccousticbs_461_460_45127.js
- by clicking on the link, we cause a note to play.
queueWaveTable (audioContext, target, preset, when, pitch, duration, continuous) is the main (and, most likely, the only necessary) function of the player. Its parameters are more detailed:
The source code and additional information with examples can be viewed on the WebAudioFont project site .
The main purpose of WebAudioFont is virtual instruments, sound effects in non-musical applications, and generation and playback of music in real-time.
On the project website there are additional examples of application areas:
WebAudioFont is not a library or framework, although it consists of Javascript code. This is a large set of musical instruments that you can use in your applications by connecting a couple of lines:
- In the catalog there are only 170 instruments with different sound options (2-3 for each instrument).
Currently allows the use of 400 (four hundred) musical instruments to play sound or generated music.
In essence, WebAudioFont is a set of Javascript files that contain an array of audio data and a description of synthesis rules ( AHDSR , frequency, etc.).
To play using the player based on Web Audio API . All the features of the Web Audio API are available for the instruments used - you can connect filters, smoothly change the volume and frequency, add echo, etc. The sound is synthesized according to the Wavetable principle.
')
Hello world
Minimum code to play sound:
<html> <head> <script src='WebAudioFontPlayer.js'></script> <script src='webaudiofont/32.0.Accoustic_32Bsaccousticbs_461_460_45127.js'></script> <script> var AudioContextFunc = window.AudioContext || window.webkitAudioContext; var audioContext = new AudioContextFunc(); var player=new WebAudioFontPlayer(); </script> </head> <body> <p><a href='javascript:player.queueWaveTable(audioContext, audioContext.destination, _tone_Accoustic_32Bsaccousticbs_461_460_45127, 0, 12*4+7, 2);'>click!</a></p> </body> </html> Get about this page .
More about the code:
<script src='WebAudioFontPlayer.js'></script> - connect the player WebAudioFontPlayer.js
<script src='webaudiofont/32.0.Accoustic_32Bsaccousticbs_461_460_45127.js'></script> - we connect the selected instrument from the file 32.0.Accoustic_32Bsaccousticbs_461_460_45127.js
<a href='javascript:player.queueWaveTable(audioContext, audioContext.destination, _tone_Accoustic_32Bsaccousticbs_461_460_45127, 0, 12*4+7, 2);'>click!</a> - by clicking on the link, we cause a note to play.
queueWaveTable (audioContext, target, preset, when, pitch, duration, continuous) is the main (and, most likely, the only necessary) function of the player. Its parameters are more detailed:
- audioContext - the current AudioContext from the Web Audio API
- target - the node through which the sound will be played, in the simplest case it is audioContext.destination
- preset - the variable containing the preset (in the example, this is _tone_Accoustic_32Bsaccousticbs_461_460_45127)
- when - start time of playback in seconds relative to audioContext.currentTime
- pitch - note height
- duration - the duration of the note in seconds
- continuous - true if you want to ignore AHDSR
The source code and additional information with examples can be viewed on the WebAudioFont project site .
For which applications can WebAudioFont be used?
The main purpose of WebAudioFont is virtual instruments, sound effects in non-musical applications, and generation and playback of music in real-time.
On the project website there are additional examples of application areas:
- virtual instruments: drummer , piano , flute
- sound effects: car sound example
- generated music playback: one riff with two options to switch
Difference from other libraries
WebAudioFont is not a library or framework, although it consists of Javascript code. This is a large set of musical instruments that you can use in your applications by connecting a couple of lines:
- In the catalog there are only 170 instruments with different sound options (2-3 for each instrument).
Source: https://habr.com/ru/post/313886/
All Articles