Question

156

Start/pause audio in an embed tag ? (IE8+)

rated 0 times [ 159] [ 3] / answers: 1 / hits: 22045 / 12 Years ago, tue, august 14, 2012, 12:00:00

I'm creating pages for a small web-based game which must have some background music playing. Those pages should be compatible with most desktop browsers, including IE8 (but we can ignore the mobile browsers).

Of course I'd like to allow the user to stop the music. And this is where it gets tricky.

Here's what I use currently (with jQuery) :

<audio id=main_audio autoplay=autoplay preload=auto loop=loop>

    <source src=sounds/bgmusic.mp3 type=audio/mpeg />

    <source src=sounds/bgmusic.ogg type=audio/ogg />

    <embed hidden=true autostart=true loop=true src=sounds/bgmusic.mp3 />

</audio>

<div id=controls class=controls>

    <a id=playpause class=play>Play/Pause</a>

</div>

<script>

    function isPlaying(audio) {return !audio.paused;}

    var a = document.getElementById('main_audio');

    $('#playpause').on('click', function() {

        if (isPlaying(a)) {

            a.pause();

        } else {

            a.play();

        }

    });

</script>

This works fine in all browsers, but IE. (I'm on Windows XP so testing on IE8 currently.)
On IE8, the audio starts playing (which is good) but the controls don't do anything so it's impossible to stop the music (and restart it).

How can I make this script work for IE too? In other word, interact with the embed tag (but only in IE)?

Answers

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

rickjordond

Add To Favorites

Follow

Total Points: 100

Total Questions: 105

Total Answers: 90

Location: Sweden

Member since Mon, May 8, 2023

1 Year ago

answered 12 Years ago jazminkyrap · Accepted Answer

Try next code:

<audio id=main_audio autoplay=autoplay preload=auto loop=loop>

    <source src=sounds/bgmusic.mp3 type=audio/mpeg />

    <source src=sounds/bgmusic.ogg type=audio/ogg />

    <embed id=main_audio_ie8 hidden=true autostart=true loop=true src=sounds/bgmusic.mp3 />

</audio>

<div id=controls class=controls>

    <a id=playpause class=play>Play/Pause</a>

</div>

<script>

    var isPlaying = function(audio) {return !audio.paused;}

    var a = document.getElementById('main_audio');

    if(!(a.play instanceof Function)){

        a = document.getElementById('main_audio_ie8');

        isPlaying = function(audio) {return audio.playState==2;}

    }

    $('#playpause').on('click', function() {

        if (isPlaying(a)) {

            a.pause();

        } else {

            a.play();

        }

    });

</script>

Another variant (code must work if WMPlayer.OCX exist on system; checked on Win2K+IE6SP1+WMP7, WinXP+IE6SP1+WMP9, WinXP+IE8+WMP11):

<audio id=main_audio autoplay=autoplay preload=auto loop=loop volume=1.0>

    <source src=sounds/bgmusic.mp3 type=audio/mpeg />

    <source src=sounds/bgmusic.ogg type=audio/ogg />

    <object id=main_audio_ie8 classid=clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6 style=display:none;> 

        <param name=URL value=sounds/bgmusic.mp3 />

        <param name=uiMode value=invisible /> 

        <param name=autoStart value=true />

        <param name=volume value=100 />

        <param name=playCount value=2147483647 /> <!-- (Int32) 2^31-1==2147483647 - maximum allowed count (for 1 second length audio is equals to 68+ years) -->

    </object> 

</audio>

<div id=controls class=controls>

    <a id=playpause class=play>Play/Pause</a>

</div>

<script type='text/javascript'>

window.onload=function(){

    var isPlaying,a=document.getElementById('main_audio');

    if(a.play instanceof Function)isPlaying=function(audio){return !audio.paused;};

    else{

        a=document.getElementById('main_audio_ie8');

        isPlaying=function(audio){return audio.playState==3;};

        a.play=function(){this.controls.play();}

        a.pause=function(){this.controls.pause();}

    }

    document.getElementById('playpause').onclick=function() {

        if (isPlaying(a)) {

            a.pause();

        } else {

            a.play();

        }

    };

};

</script>