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');...

Answer 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