Question

144

How do I get Html5 audio to play sound on click? (ogg for browsers like Firefox and mp3 for browsers like chrome)

rated 0 times [ 151] [ 7] / answers: 1 / hits: 17231 / 11 Years ago, sat, march 9, 2013, 12:00:00

How do I get Html5 audio to play sound on click? (ogg for browsers like Firefox and mp3 for browsers like chrome)

So far onclick I can change to a single filetype but I can't get it to have a backup option like you do on a normal html5 audio declaration i.e.

<audio controls>

  <source src=horse.ogg type=audio/ogg>

  <source src=horse.mp3 type=audio/mpeg>

Your browser does not support the audio element.

</audio>

Code:

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<html xmlns=http://www.w3.org/1999/xhtml>



<head>

<meta content=text/html; charset=utf-8 http-equiv=Content-Type />

<title>How do i call the javascript function and get it to play .ogg if can't play .mp3?</title>

</head>

<body>

    <audio id=Mp3Me autoplay autobuffer controls>

  <source src=Piano.mp3>

</audio>



<a href=javascript:GuitarTrack()>Guitar</a>



<script type=text/javascript>

function GuitarTrack(){

var Mp3Me= document.getElementById('Mp3Me');

Mp3Me.src = Guitar.mp3;

Mp3Me.src = Guitar.ogg;

}

</script>



</body>



</html>

Answers

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

austonjuancarlosb

Add To Favorites

Follow

Total Points: 238

Total Questions: 89

Total Answers: 99

Location: Chad

Member since Mon, Dec 5, 2022

1 Year ago

answered 11 Years ago jimmieo · Accepted Answer

Since you are creating only one <source> element, you have to either create another <source> element in HTML or create one using JavaScript.

Creating second element using HTML. http://jsfiddle.net/PVqvC/

<audio id=Mp3Me autoplay autobuffer controls>

<source src=Piano.mp3>

<source src=Piano.ogg>

</audio>

<a href=javascript:GuitarTrack();>Guitar</a>



<script type=text/javascript>

function GuitarTrack(){

    var Mp3Me= document.getElementById('Mp3Me');

    Mp3Me.children[0].src = Guitar.mp3;

    Mp3Me.children[1].src = Guitar.ogg;

    Mp3Me.load();

}

</script>

Creating second element using JS. http://jsfiddle.net/MBvsC/1/

<audio id=Mp3Me autoplay autobuffer controls>

<source src=Piano.mp3>

</audio>

<a href=javascript:GuitarTrack();>Guitar</a>



<script type=text/javascript>

function GuitarTrack(){

    var Mp3Me= document.getElementById('Mp3Me').getElementsByTagName('source');



    if(Mp3Me.length > 1) { //there are 2 elements

        Mp3Me[0].src = Guitar.mp3;

        Mp3Me[1].src = Guitar.ogg;

    }

    if(Mp3Me.length == 1) { //only one element, so we need to create the second one

        Mp3Me[0].src = Guitar.mp3; //changes existing element



        var node = document.getElementById('Mp3Me');

        var newelem = document.createElement('source');

        newelem.setAttribute('src', 'Guitar.ogg');

        node.appendChild(newelem); //creating new element with appropriate src                         

    }

    Mp3Me.load();

}

</script>

As you can see, the first method is a lot shorter and cleaner, so if you can use it - use it. If you have any further questions - feel free to ask.