javascript – 切换音频播放 – 暂停图像

发布时间：2020-12-14 22:58:02 所属栏目：资源来源：网络整理

导读：我的html,css和js都包含在他们自己的文件中(index.html,javascript.js,style.css).我想更改按钮的背景图像来表示其状态. 以下是我目前的片段： #btn_playPause { background-image: url(../contents/img/losAudio_play.png); height: 35px; width: 35px;} 最

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

以下是我目前的片段：


#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”).样式部分不起作用,并且找不到解决方案.


最佳答案
(编辑：)
使用多个轨道的完整示例
这是一个很好的例子(使用非常简单的UI),使用FontAwesome提供的多个轨道和Play/Pause Icons.
单击某个曲目将暂停所有正在进行的音轨并切换所单击曲目标题的播放/暂停图标.
实际音轨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

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

(实际答案:)
>不要使用内联JS,将JS逻辑保存在一个地方
>使用addEventListener和正确的camelCase style.backgroundImage(或样式[“background-image”],如果你愿意的话)
>(按钮已经是“type =按钮”)

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


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!