Toggle Audio Play-Pause image

Question

My html, css and js are all contained within their own files (\'index.html\', \'javascript.js\', \'style.css\'). I want to change the background-image of the button to repre

Answer 1

(Edit:)

Complete example using multiple tracks

Here's a nice example (with a really simple UI) that uses multiple tracks and Play/Pause Icons provided by FontAwesome.
Clicking on a track will pause all ongoing audio tracks and toggle the play/pause icon for the clicked track title.
The actual audio track src is stored in the clickable element's data-audio attribute:

;/*SIMPLE AUDIO PLAYER*/(function() {
  // https://stackoverflow.com/a/34487069/383904
  var AUD = document.createElement("audio"),
      BTN = document.querySelectorAll("[data-audio]"),
      tot = BTN.length;
  
  function playPause() {
    // Get track URL from clicked element's 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.github.io/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:)

1. Don't use inline JS, keep your JS logic in one place
2. Use addEventListener and the correct camelCase style.backgroundImage (or style["background-image"] if you will)
3. (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);

---

Don't request new images on click! Use a CSS Sprite Image for your element:

and change it's background-position on 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

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

Also it is better to use class rather than inline CSS since inline CSS have highest precedence and it will trouble 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() is used when you want to have multiple class on an element.Simillarly you can you classList.remove() to remove a class from an element.

This is just demo you can change as required

Answer 3

.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 no other classes are involved,

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

or

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

the icons might not be exactly right but I would just change class name instead of messing with the images.