HTML5 API-use WebAudio API to play audio files

The WebAudio API is designed to add sound effects to audio files, but it can also be used to play audio files. This is similar to the HTML5 audio element function, but the audio element can have a control interface, you can click the play/stop button on the interface to control file playback, or drag the progress bar on the interface to control the playback progress. However, the WebAudio API does not control the UI for audio playback. However, IOS is very useful for mobile platforms such as Android, for example, on the Android platform, the Chrome browser sets the gesture-requirement-for-media-playback attribute, which means that audio files cannot be played by calling the play function of the audio element, in addition to calling the play function, you must also require a gesture operation on the screen, which is consistent with the behavior on IOS. Now, if WebAudio is used to play audio files, there is no such restriction. developers can control the playback and stop of audio files at will, which is especially important for game developers on mobile platforms, currently popular game engine Cocos2d-html5 is using this feature.

The following is an example code:

Var context = new window. webkitAudioContext (); var source = null; var audioBuffer = null; function stopSound () {if (source) {source. noteOff (0); // stop now} function playSound () {source = context. createBufferSource (); source. buffer = audioBuffer; source. loop = true; source. connect (context. destination); source. noteOn (0); // play now} function initSound (arrayBuffer) {context. decodeAudioData (arrayBuffer, function (buffer) {// callback function audioBuffer = buffer; playSound () ;}, function (e) {// decoding the callback function console when an error occurs. log ('error decoding file', e) ;});} function loadAudioFile (url) {var xhr = new XMLHttpRequest (); // download the audio file XHR through xhr. open ('get', url, true); xhr. responseType = 'arraybuffer'; xhr. onload = function (e) {// download completed initSound (this. response) ;}; xhr.send({{{loadsoundfile('demo-audio ');

In the above example, the XMLHttpRequest API is used to download the audio file from the server to the local device. After the download is complete, the iniSound function is called, this function calls the decodeAudioData function in WebAudio to decode the downloaded data (currently stored as ArrayBuffer). If the platform does not support decoding audio files, an error callback function is called, if the decoding succeeds, a successful callback function is called. Now, if the decoding is successful, call the playSound function in the decoded function to play the decoded audio file.

Efficiency of using WebAudio to play audio files

We have discussed how to use WebAudio to play audio files. However, it is important not to use WebAudio easily because when the audio files are large, the program execution efficiency may be affected. First, if we use XMLHttpRequest in the program to download files, this is a time-consuming operation. The specific time depends on the current network environment and file size, although asynchronous download is used in the program, the audio playback latency is also caused. Second, the program needs to call WebAudio's decodeAudioData function to decode the entire audio file. Here, it must note that it needs to decode the entire file at a time before triggering a successful callback function, the program can start playing the audio file, which increases the playback delay of the audio file again. In addition, due to the one-time decoding of the entire file, the entire decoded and decoded files are stored in the memory at the same time, which also results in a huge memory overhead (compared to playing with the audio element, because the audio element is decoded and played ). At this time, some may question the implementation of the decodeAudioData API. In fact, this function is designed to decode Short audio files. In addition, due to WebAudio's special attention to audio latency, therefore, to reduce the sound latency, you must load the audio files to be processed into the memory before processing the sound.

Therefore, if you need to use WebAudio to play a file and pay more attention to the efficiency issue, we recommend that you reduce the audio file size or split it into several small files and load and decode them separately.