Question

I have a requirement to change the Play link css/image once the media file is played completely. Suppose that we have a Play icon when the page is loaded and when user clicks on the Play icon, it will change to Stop icon. Now the requirement is when ever the media file is played completely, stop icon must be changed Play icon automatically. Below is the sample HTML code we are using

CSS Code

<style>
.css-play{
height:21px;  display:block;cursor:pointer;
background: url(/images/backgrounds/ct_initial.gif) left top no-repeat;
}
.css-stop {
height:21px; display:block;cursor:pointer;
background: url(/images/backgrounds/ct_playing.gif) left top no-repeat;
}
</style>

Javascript Code

<script  type="text/javascript">
    function Play(songname,ctrl)
    {
      document.getElementById("divEmbed").innerHTML='<embed id="sound" NAME="sound" src="'+songname+'"  autostart="true" type="audio/wav" ></embed>';
       ctrl.className  = 'css-stop';
    }
    </script>

HTML Code

<div id="divEmbed" > </div>
<a onclick="Play('preview.wav',this);" class="css-play" >click</a>

Looking for any sort of support

Answer 1

Since you are not using a player, that is not possible. The <embed> tag exposes no events like HTML5’s <audio> tag does. You would either have to use a sound-only flashmovie, that runs your action at the end by invoking it from actionscript. Or use a player, that exposes those events.