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

概述我的html,css和js都包含在他们自己的文件中('index.html','javascript.js','style.css').我想更改按钮的背景图像来表示其状态.以下是我目前的片段：<button id='btn_playPause' type='button' onclick='losAudio_playPause()'></b

我的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;}
dio ID="losAudio" src="http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg">Audio not supported
          总结       
以上是内存溢出为你收集整理的javascript  – 切换音频播放 – 暂停图像全部内容，希望文章能够帮你解决javascript  – 切换音频播放 – 暂停图像所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
原文地址:https://54852.com/web/1122698.html