Dynamically control HTML5 audio with JavaScript

Question

I've got a gallery of sorts with 10 or so thumbnails that each represent one song. To control the playback of each, I've set a play button to fades in via jQuery. After some digging around Apple's Dev Center I found some native JavaScript to control audio. It works beautifully, but is written for control of one object at a time. What I'd like to do is rewrite it as one function that dynamically controls the playback/pause of the thumbnail you're selecting.

Below is the code that I found.. works, but it'd be a lot of unnecessary code to write it 10 times.

Thanks for your help and advice, always!

HTML:

    <div class="thumbnail" id="paparazzixxx">
        <a href="javascript:playPause();">
            <img id="play" src="../images/icons/35.png" />
        </a>
        <audio id="paparazzi">
            <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
            <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
            Your browser does not support HTML5 audio.
        </audio>
    </div>

JavaScript:

<script type="text/javascript">
       function playPause() {
       var song = document.getElementsByTagName('audio')[0];
       if (song.paused)
           song.play();
       else
           song.pause();
       }
</script>

jessegavin · Accepted Answer · 2011-04-19T00:04:58.190

22

jQuery is awesome for this sort of thing. It gives you the ability to easily manipulate elements based on their relationship to other elements in the DOM tree. In your example you want to be able to make the <a> elements only affect the <audio> elements that are right next to them when clicked.

The problem with your current Javascript code is that it is actually just grabbing only the first audio element on the entire page.

Here's how you can change your code to support an unlimited number of <a> & <audio> pairs.

Add a class to the <a> tag ('playback' in my example)
Replace the href attribute with a '#'
Then use jQuery to attach a handler to the click event for elements with that class.

HTML

<div class="thumbnail" id="paparazzixxx">
    <a class="playback" href="#">
        <img id="play" src="../images/icons/35.png" />
    </a>
    <audio id="paparazzi">
        <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
        <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
        Your browser does not support HTML5 audio.
    </audio>
</div>

Javascript

<script type="text/javascript">
   $(function() {
     $(".playback").click(function(e) {
       e.preventDefault();

       // This next line will get the audio element
       // that is adjacent to the link that was clicked.
       var song = $(this).next('audio').get(0);
       if (song.paused)
         song.play();
       else
         song.pause();
     });
   });
</script>

edited Apr 19 '11 at 00:04

answered Apr 18 '11 at 02:43

jessegavin

74,067
28
136
164

@jessegavin thanks for the thorough answer. I appreciate the time you took in explaining the advantage jQuery has in this application. I implemented your code into my page, but it's not playing the audio file. Any thoughts? Does it work for you? – technopeasant Apr 18 '11 at 04:37
Is the html in your page exactly like the html in your example? Does an audio tag follow a link tag in every case? - Are you getting any specific javascript errors? – jessegavin Apr 18 '11 at 08:36
@jessegavin The HTML is copied exactly, and yes, the audio tag follows a link in every case (supporting .next). No specific errors, just no audio. Here's a jsFiddle to demonstrate: http://jsfiddle.net/66FwR/ – technopeasant Apr 18 '11 at 19:22
I had an extra `}` in there. I have updated my answer above. It works now. I also updated your jsFiddle so you can see it in action: http://jsfiddle.net/66FwR/1/ – jessegavin Apr 19 '11 at 00:04
@Jessegavin perfect! Syntax will likely be the death of me. Do I need to include an href in the anchor tags? – technopeasant Apr 19 '11 at 00:13
You don't have to. If you wanted to support non-javascript enabled browsers, then you could swap the href to point to the mp3 url for each song (no coding changes would be required beside that). – jessegavin Apr 19 '11 at 00:15
@jessegavin Ah, good to know. Thank you. Dropped the code in my site. It isn't working, so I'm hunting down what might be conflicting with it. – technopeasant Apr 19 '11 at 00:26

Dynamically control HTML5 audio with JavaScript

1 Answers1

Linked