0

i have this solution working in chrome:

Play an audio file using jQuery when a button is clicked

but firebug console says:

HTTP "Content-Type" of "audio/mpeg" is not supported. Load of media resource http://path/to/sound.mp3 failed.

is there a way to define both an ogg and mp3 file in this script (assuming this would enable the sound to play in firefox):

<script>
$(document).ready(function() {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'http://path.com/to/sound.mp3');
$('#play_it').click(function() {
audioElement.play();
});
});
</script>

thank you.

update

i tried just adding another reference to the file below the mp3 reference and it worked, not sure if this is the best solution though:

<script>
$(document).ready(function() {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'http://path.com/to/sound.mp3');
audioElement.setAttribute('src', 'http://path.com/to/sound.ogg');
$('#play_it').click(function() {
audioElement.play();
});
});
</script>
Community
  • 1
  • 1
user1063287
  • 10,265
  • 25
  • 122
  • 218
  • possible duplicate of [How can I add multiple sources to an HTML5 audio tag, programmatically?](http://stackoverflow.com/questions/4053262/how-can-i-add-multiple-sources-to-an-html5-audio-tag-programmatically) – Marc B Oct 29 '12 at 15:33

1 Answers1

1

You will have to add <source> elements to the <audio> element in order to specify different sound formats

<audio>
    <source src="sound.ogg" type="audio/ogg">
    <source src="sound.mp3" type="audio/mpeg">
</audio>

jQuery:

var audioElement = $('audio');
var sourceElement = $('source');
sourceElement.attr('src', 'http://path.com/to/sound.mp3');
sourceElement.attr('type', 'audio/mpeg');
audioElement.append(sourceElement);
sourceElement = $('source');
sourceElement.attr('src', 'http://path.com/to/sound.ogg');
sourceElement.attr('type', 'audio/ogg');
audioElement.append(sourceElement);
devnull69
  • 16,402
  • 8
  • 50
  • 61