How to control HTML5 audio tag with javascript

Question

I am trying to play a mp3 during s JS slideshow . I am having trouble manipulating the audio tag to play when the slideshow begins.

I have tried some JS and HTML standard audio tag but am struggling to control the music playing when slideshow starts.

Any ideas welcome (ps my JS is pretty basic)!

Code beow (incluidng eivers88 script): The slideshow fails to load when audio script added..

<script type="text/javascript" 
src="http://slideshow.triptracker.net/slide.js"></script>
<script type="text/javascript">
<!-- 

//3rd attempt to play audio with slideshow for stackoverflow
var audioType='.mp3';
var audioPlayer = document.createElement('audio');

audioPlayer.setAttribute('src', 'images/Music/Oceans.mp3');
$('body').append(audioPlayer);
audioPlayer.load();
audioPlayer.play();

var viewer = new PhotoViewer();
viewer.enablePhotoFading()
viewer.enableAutoPlay();
viewer.disableToolbarAnimator();
viewer.randomize();
viewer.setOnClickEvent(viewer.permalink);


 viewer.add('images/Gallery/image1.jpg');`enter code here`

 //images enetered as arguments here viewer.add('images/Gallery/image1.jpg');...

eivers88 · Accepted Answer · 2013-03-15 16:43:20Z

1

Have you tried something simple like:

var audioType = '.mp3';
var audioPlayer = document.createElement('audio');

if(!!audioPlayer.canPlayType('audio/ogg') === true){
    audioType = '.ogg' //For firefox and others who do not support .mp3
}

audioPlayer.setAttribute('src', 'path/to/song' + audioType);
$('body').append(audioPlayer);
audioPlayer.load();
audioPlayer.play(); //put this where your slide show starts

answered Mar 15, 2013 at 16:43

eivers88

6,2771 gold badge35 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

dancingbush Over a year ago

Cheers, i had tried something similar within the script for skideshow in head of document but it played automatically when page loaded:

dancingbush Over a year ago

This is the code: var audioElement = document.createElement('audio'); audioElement.setAttribute('src', 'loading.ogg'); audioElement.play();

eivers88 Over a year ago

You have to place audioPlayer.play() in a place that does not get fired until your slide show starts. If you post more of your code (the slideshow part) I could help with the placement.

eivers88 Over a year ago

just briefly looking at the API for this plugnin at slideshow.triptracker.net/howto.html I don't see any callback functions for when the slideshow starts. It might look something like this viewer.onStart = function(){ audioPlayer.play()}, but from the looks of it would require some tinkering with the plugin. I'll take a better look when I have some more time this weekend.

Collectives™ on Stack Overflow

How to control HTML5 audio tag with javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related