Question

103

Dynamically control HTML5 audio with JavaScript

rated 0 times [ 109] [ 6] / answers: 1 / hits: 51697 / 13 Years ago, mon, april 18, 2011, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

addie

Add To Favorites

Follow

Total Points: 699

Total Questions: 89

Total Answers: 97

Location: Cayman Islands

Member since Fri, Mar 4, 2022

2 Years ago

answered 13 Years ago lailab · Accepted Answer

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>