Pausing multiple audio elements.

[DanTonyBrown]

Hi guys,

I have created several audio elements using this code.

function

Code: Select all

        <script src="js/modernizr-1.7.min.js"></script>
      <script>
         function playSong(songname) {
            if (Modernizr.audio && Modernizr.audio.ogg){
                    var songfile = 'ogg/'+ songname + '.ogg';
                    audioElement = new Audio(songfile);
                    audioElement.play();
               }
                  else if (Modernizr.audio && Modernizr.audio.mp3){
                    var songfile = 'mp3/' + songname + '.mp3';
                    audioElement = new Audio(songfile);
                    audioElement.play();
                  }
         }
      </script>

Html that calls the function

Code: Select all

<ul>
                  <li onClick="playSong('wakeupcallpreview');">01. Wake Up Call</li>
                        <li onClick="playSong('cheatinghandspreview');">02. Cheatin Hands</li>
                        <li onClick="playSong('hellintownpreview');">03. Hell in Town</li>
                        <li onClick="playSong('mrsunpreview');">04. Mr. Sun</li>
                        <li onClick="playSong('whycantyoutellmepreview');">05. Why Can't You Tell Me?</li>
                        </ul>

As you can see, i can make a file play, but irritatingly you can play one file on top of another. What is a good way of pause() ing all audio elements made?
I would like to do something like (in english)

allAudio.pause()
.... rest of script to make audio element and play it

Thanks in advance
danny.

[zcorpan]

You could have just a single audio element and set the new src on it, it will cause the currently playing audio to unload when loading the new one.

Code: Select all

        <script src="js/modernizr-1.7.min.js"></script>
      <script>
         var audioElement = Modernizr.audio ? new Audio() : null;
         function playSong(songname) {
            if (audioElement && Modernizr.audio.ogg){
                    var songfile = 'ogg/'+ songname + '.ogg';
                    audioElement.src = songfile;
                    audioElement.play();
               }
                  else if (audioElement && Modernizr.audio.mp3){
                    var songfile = 'mp3/' + songname + '.mp3';
                    audioElement.src = songfile;
                    audioElement.play();
                  }
         }
      </script>


Or you could create one audio element for each clip in an array or object (or in the document) and pause them when playing a new one.