CODEWITHSUNDEEP
javascripthtml
dancingbush
dancingbush

Reputation: 2281

How to control HTML5 audio tag with javascript

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

Upvotes: 0

Views: 718

Answers (1)

eivers88
eivers88

Reputation: 6247

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

Upvotes: 1

Related Questions