切换音频播放暂停图像 [英] Toggle Audio Play-Pause image

问题描述

我的html，css和js都包含在它们自己的文件中（'index.html'，'javascript.js'，'style.css'）。我想改变按钮的背景图像来表示它的状态。

以下是我有的片段：

 <按钮id =btn_playPausetype =buttononclick =losAudio_playPause（）>< / button> 
  

 ＃ btn_playPause {
 background-image：url（../ contents / img / losAudio_play.png）; 
 height：35px; 
 width：35px; 
} 
  

最后，JavaScript（失败点）

 函数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）; 
 
 
 $ / code $ / pre 
 
 
我完全失去了为什么 document.getElementByID（btn_playPause）。style 部分不起作用，并且找不到解决方案。 
 
解决方案
 
      > 
 
 
这里有一个很好的例子（用一个非常简单的用户界面），它使用多个轨道和 
 
 
 
并更改它的 background-position 点击： 
 
 
 
 
 
  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）;  
 < pre-class =snippet-code-css lang-css prettyprint-override>  #btn_playPause {background：url（http://i.stack.imgur.com/ENFH5.png）no-repeat;边界：无;宽度：32PX;高度：32PX;光标：指针; outline：none;}  

< audio id =losAudio src =http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg>音频不支持< / audio><按钮ID =btn_playPause><<< ; / button>

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.

解决方案

(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>

这篇关于切换音频播放暂停图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！