Toggle multiple Audio Play-Pause

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 represent its state.

Here are the current snippets 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, the 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 am utterly lost as to why the document.getElementByID("btn_playPause").style parts aren't working, and can't find a solution.

Answer 1

Audio player with multiple tracks

Here's an 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 play/pause for the clicked track.

• It reuses one single audio instance using new Audio()
• The actual audio tracks src are stored in every element's data-audio attribute:

;/*SIMPLE AUDIO PLAYER*/(() => {
  // https://stackoverflow.com/a/34487069/383904
  const AUD = new Audio(),
      BTNS = document.querySelectorAll("[data-audio]");
  
  function playPause() {
    const src = this.dataset.audio;
    if (AUD.src != src) AUD.src = src;
    AUD[AUD.paused ? "play" : "pause"]();
    BTNS.forEach(el => el.classList.remove("pause"));
    this.classList.toggle("pause", !AUD.paused);
  }
  
  AUD.addEventListener("ended", playPause);
  BTNS.forEach(el => el.addEventListener("click", playPause));
})();

[data-audio]{cursor:pointer;}
[data-audio].pause{color: #0ac;}
/*https://fortawesome.github.io/Font-Awesome/cheatsheet/*/
[data-audio]:before{content:"\f144";}
[data-audio].pause: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");
  // or use: audio.classList.toggle("pause", isPaused)
}

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>