Inline audio play/pause and RESET

JavaScript
1

I don’t really know javascript but was able to piece together some different advice to get this far with basic audio playing on a text link. See live site below:

http://steveobrienvo.com

The one thing I need now is for the audio button to reset to the original text when it’s done playing. So basically, when the Commercial audio reaches the end of the audio file, I want it to change back to “Commercial” again rather than stay on “Pause/Replay” What’s the best code to achieve that, or is there code for that?

I did some searching and found audio.addEventListener. Is that the best way?

Here’s how it’s working currently:

    <audio src="http://steveobrienvo.com/demos/COMMERCIAL.mp3" id="mp3-1"     preload="auto"></audio>
    <audio src="http://steveobrienvo.com/demos/NARRATION.mp3" id="mp3-2" preload="auto</audio>
    <audio src="http://steveobrienvo.com/demos/PROMO.mp3" id="mp3-3" preload="auto </audio>
    <audio src="http://steveobrienvo.com/demos/TV.mp3" id="mp3-4" preload="auto"></audio>
    <audio src="http://steveobrienvo.com/demos/NEWS.mp3" id="mp3-5" preload="auto"></audio>
    <audio src="http://steveobrienvo.com/demos/COUNTRY.mp3" id="mp3-6" preload="auto"></audio>
    <audio src="http://steveobrienvo.com/demos/AC.mp3" id="mp3-7" preload="auto"></audio>

<script type="text/javascript">
function playpauseCOMMERCIAL(){
if(document.getElementById("mp3-1").paused){
    document.getElementById("mp3-1").play();
    document.getElementById('audio_text').innerHTML = '>Pause/Replay';
    }else{
    document.getElementById("mp3-1").pause();
document.getElementById('audio_text').innerHTML = 'Commercial';
    }
}
2

Hi,

That’s exactly what’s happening for me (it changes back to commercial).
Did you get this fixed, or is there a particular browser that is giving you trouble?

3

Also, don’t you think it might be nice to include controls for the player, so as to give users some kind of feedback as to how much they have listened to and how much remains?
You could also have a volume control and an option to download the file being currently played.
Example: http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-miniaudioplayer/ (players in the right hand sidebar).