切换音频播放 - 暂停图像

Question

我的html,css和js都包含在他们自己的文件中('index.html','javascript.js','style.css').我想更改按钮的背景图像来表示其状态.

以下是我目前的片段:

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

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

最后,JavaScript(失败点)

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)";
    }
}

我完全迷失了为什么document.getElementByID("btn_playPause").style部件不能正常工作,并且无法找到解决方案.

Answer 1

（编辑：）

使用多个轨道的完整示例

这是一个很好的示例（具有非常简单的 UI），它使用FontAwesome提供的多个轨道和播放/暂停图标。 单击曲目将暂停所有正在进行的音轨并切换单击曲目标题的播放/暂停图标。 实际音轨存储在可点击元素的 属性中：

srcdata-audio

;/*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>

（实际答案：）

1. 不要使用内联 JS，将你的 JS 逻辑放在一个地方
2. 使用addEventListener和正确的驼峰式命名法style.backgroundImage（或者style["background-image"]如果你愿意的话）
3. （按钮已经是一个"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);

不要在点击时请求新图片！为您的元素使用CSS 精灵图像：

并在单击时更改它的背景位置：

<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);

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);