Ajaxian

Wednesday, November 30th, -0001

HTML5 Audio Tutorial: Rotating Channels

Category: HTML, Sound

<p>Thomas Sturm continues to add great content to his HTML5 stories in flight. His latest talks on HTML 5 Audio and goes into a tactic to implement rotating channels:

Here is one solution to overcome the single-channel limitation of the audio tag: Use multiple rotating audio channels and assign new sounds to currently unused channels. Click the links above rapidly to test this.

In the example above we use 10 channels (generated audio objects) and whenever the user clicks another sound to play, the script finds an inactive (and therefore unblocked) channel and then loads and plays the selected sound.

Each of the sounds is being preloaded with an audio html tag that is actually never used to play the sound - the autobuffer="autobuffer" property forces the browser to load all of the sounds when the page loads, instead of when the sound is played for the first time through one of the generated audio channels.

The script checks each channel if it is done playing the previous sound. There is an "ended" property for the audio object, but since that property is "false" when new objects are created (which is correct, but inconvenient), I've decided to keep track of the expected end times for each sound channel instead.

PLAIN TEXT

HTML:

1.  
2. <audio id="multiaudio1" src="audio/flute_c_long_01.wav" autobuffer="autobuffer"></audio>
3. <audio id="multiaudio2" src="audio/piano_chord.wav" autobuffer="autobuffer"></audio>
4. <audio id="multiaudio3" src="audio/synth_vox.wav" autobuffer="autobuffer"></audio>
5. <audio id="multiaudio4" src="audio/shimmer.wav" autobuffer="autobuffer"></audio>
6. <audio id="multiaudio5" src="audio/sweep.wav" autobuffer="autobuffer"></audio>
7.  
8. <a href="javascript:play_multi_sound('multiaudio1');">Flute</a><br />
9. <a href="javascript:play_multi_sound('multiaudio2');">Piano Chord</a><br />
10. <a href="javascript:play_multi_sound('multiaudio3');">Synth Vox</a><br />
11. <a href="javascript:play_multi_sound('multiaudio4');">Shimmer</a><br />
12. <a href="javascript:play_multi_sound('multiaudio5');">Sweep</a><br />
13.  
14. <script type="text/javascript">
15.         var channel_max = 10;                              // number of channels
16.         audiochannels = new Array();
17.         for (a=0;a<channel_max ;a++) {                  // prepare the channels
18.                 audiochannels[a] = new Array();
19.                 audiochannels[a]['channel'] = new Audio();                                    // create a new audio object
20.                 audiochannels[a]['finished'] = -1;                                          // expected end time for this channel
21.         }
22.         function play_multi_sound(s) {
23.                 for (a=0;a<audiochannels.length;a++) {
24.                         thistime = new Date();
25.                         if (audiochannels[a]['finished'] <thistime.getTime()) {   // is this channel finished?
26.                                 audiochannels[a]['finished'] = thistime.getTime() + document.getElementById(s).duration*1000;
27.                                 audiochannels[a]['channel'].src = document.getElementById(s).src;
28.                                 audiochannels[a]['channel'].load();
29.                                 audiochannels[a]['channel'].play();
30.                                 break;
31.                         }
32.                 }
33.         }
34. </script>
35.  

Posted by Dion Almaer at 12:00 am
Comment here