使用多个曲目的完整示例

Question

我的html，css和js都包含在他们自己的文件中（＆＃39; index.html＆＃39;，＆＃39; javascript.js＆＃39;，＆＃39; style.css＆＃39;）。我想更改按钮的背景图像来表示其状态。

以下是我目前的片段：

<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

<强> （编辑：）

使用多个曲目的完整示例

这是一个很好的示例（使用非常简单的用户界面），它使用多个跟踪和Play/Pause Icons提供的FontAwesome。
单击曲目将暂停所有正在进行的音轨并切换所单击曲目标题的播放/暂停图标实际音轨src存储在可点击元素的data-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>

（ 实际答案： ）

不要使用内联JS，将JS逻辑保存在一个地方
使用addEventListener和正确的camelCase style.backgroundImage（如果愿意，可以使用style["background-image"]）
（按钮已经是“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 Sprite Image作为元素：

点击后更改背景位置：

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

如果不涉及其他类，

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

或

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

图标可能不完全正确，但我只是更改类名而不是弄乱图像。

Answer 3

您需要使用document.body.style.backgroundImage = "url(...)。注意backgroundImage而不是background-image这是一个css属性。

最好使用类而不是内联CSS，因为内联CSS具有最高优先级，如果你想要更改它会给你带来麻烦下面的代码片段可以帮到你 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

注意：当你想在一个元素上有多个类时，会使用classList.add()。你可以classList.remove()从一个元素中删除一个类。

这只是演示，您可以根据需要进行更改

切换音频播放 - 暂停图像

3 个答案:

使用多个曲目的完整示例