Switch audio playback

Question

My html, css and js are contained in their own files ('index.html', 'javascript.js', 'style.css'). I want to change the background image of a button to represent its state.

Here are the current snippets that I have:

<button id="btn_playPause" type="button" onclick="losAudio_playPause()"></button> 

 #btn_playPause { background-image: url(../contents/img/losAudio_play.png); height: 35px; width: 35px; } 

And finally, JavaScript (point of failure)

 function losAudio_playPause() { var losAudio = document.getElementById("losAudio"); if (losAudio.paused) { losAudio.play(); document.getElementById("btn_playPause").style.background-image="url(../contents/img/losAudio_pause.png)"; } else { losAudio.pause(); document.getElementById("btn_playPause").style.background-image="url(../contents/img/losAudio_pause.png)"; } } 

I completely lost why the parts of document.getElementByID("btn_playPause").style do not work and cannot find a solution.

Answer 1

(Edit :)

Full example using multiple tracks

Here is a good example (with a really simple user interface) that uses multiple tracks and Play / Pause Icons provided by FontAwesome .
Tapping a track pauses all current audio tracks and switches the play / pause icon for the named track name.
The actual src soundtrack is stored in the clickable data-audio attribute:

 ;/*SIMPLE AUDIO PLAYER*/(function() { // /questions/1239325/toggle-audio-play-pause-image/3976760#3976760 var AUD = document.createElement("audio"), BTN = document.querySelectorAll("[data-audio]"), tot = BTN.length; function playPause() { // Get track URL from clicked element data attribute var src = this.dataset.audio; // Are we already listening that track? if(AUD.src != src) AUD.src = src; // Toggle audio play() / pause() methods AUD[AUD.paused ? "play" : "pause"](); // Remove active class from all other buttons for(var j=0;j<tot;j++) if(BTN[j]!=this) BTN[j].classList.remove("on"); // Add active class to clicked button this.classList.toggle("on"); // Track ended? (Remove active class etc) AUD.addEventListener("ended", playPause); } for(var i=0;i<tot;i++) BTN[i].addEventListener("click", playPause); }()); 

 [data-audio]{cursor:pointer;} [data-audio].on{color: #0ac;} /*https://fortawesome.imtqy.com/Font-Awesome/cheatsheet/*/ [data-audio]:before{content:"\f144";} [data-audio].on:before{content:"\f28b";} 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" > <a class="fa" data-audio="http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg"> ACDC: Back in Black</a><br> <a class="fa" data-audio="https://upload.wikimedia.org/wikipedia/en/3/39/Metallica_-_Enter_Sandman.ogg"> Metallica:Enter Sandman</a><br> <a class="fa" data-audio="https://upload.wikimedia.org/wikipedia/en/5/5e/U2_One.ogg"> U2: One</a><br> 

---

( Actual answer:)

• Do not use embedded JS, keep your JS logic in one place.
• Use addEventListener and the correct camelCase style.backgroundImage (or style["background-image"] if you want)
• (The button is already a "type =" button)

 <button id="btn_playPause">Toggle play pause</button> 

 var losAudio = document.getElementById("losAudio"); function losAudio_playPause() { var isPaused = losAudio.paused; losAudio[isPaused ? "play" : "pause"](); this.style.backgroundImage="url('img/"+ (isPaused ? "icoPlay" : "icoPause") +".png')"; } document.getElementById("btn_playPause").addEventListener("click", losAudio_playPause); 

---

Do not request new images when clicked! Use CSS Sprite Image for your element:

and change its background-position to click:

 var audio = document.getElementById("losAudio"); var btn_playPause = document.getElementById("btn_playPause"); function losAudio_playPause() { var isPaused = losAudio.paused; losAudio[isPaused ? "play" : "pause"](); this.style.backgroundPosition= "0 "+ (isPaused ? "-32px":"0px"); } btn_playPause.addEventListener("click", losAudio_playPause); 

 #btn_playPause{ background:url(http://i.stack.imgur.com/ENFH5.png) no-repeat; border:none; width:32px; height:32px; cursor:pointer; outline:none; } 

 <audio id="losAudio" src="http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg">Audio not supported</audio> <button id="btn_playPause"></button> 

Answer 2

 .playPause { background-image: url(../contents/img/losAudio_play.png); height: 35px; width: 35px; } .playPlay { background-image: url(../contents/img/losAudio_pause.png); height: 35px; width: 35px; } 

and if other classes are not involved,

 document.getElementById("btn_playPause").className = "playPlay"; 

or

 document.getElementById("btn_playPause").className = "playPause"; 

the icons may not be entirely correct, but I would just change the class name instead of messing around with images.

Answer 3

You need to use document.body.style.backgroundImage = "url(...) . Note backgroundImage not background-image , which is a css property.

It is also better to use a class rather than inline CSS, since inline CSS has the highest priority and it will bother you if you want to change it. Below snippet can help you HTML

 <button id="btn_playPause" type="button" onclick="losAudio_playPause()">Click Me</button> <button id="btn_playPause_add" type="button" onclick="losAudio_AddClass()">Add Class</button> 

Js

 function losAudio_playPause() { var losAudio = document.getElementById("losAudio"); if (losAudio.paused) { losAudio.play(); document.getElementById("btn_playPause").style.backgroundImage="url(../contents/img/losAudio_pause.png)"; } else { losAudio.pause(); document.getElementById("btn_playPause").style.backgroundImage="url(../contents/img/losAudio_pause.png)"; } } function losAudio_AddClass() { // With class document.getElementById("btn_playPause_add").classList.add('demoClass'); } 

WORKING DEMO

NOTE. classList.add() used when you want to have multiple classes on an element. You can classList.remove() remove the class from the element.

This is just a demo that you can change as needed.