admin管理员组文章数量:1323723
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.
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.
-
1
.style.backgroundImage
, notstyle.background-image
. – user1106925 Commented Dec 28, 2015 at 2:34 - 1 In this case actually, you should toggle a class on that button and apply different background to different classes in css – Phoenix Commented Dec 28, 2015 at 2:35
- 2 Always, use developer tools and have an eye on Console for possible code (JS) errors. – Roko C. Buljan Commented Dec 28, 2015 at 2:36
3 Answers
Reset to default 5Audio player with multiple tracks
Here's an 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 play/pause for the clicked track.
- It reuses one single audio instance using
new Audio()
- The actual audio tracks
src
are stored in every element'sdata-audio
attribute:
;/*SIMPLE AUDIO PLAYER*/(() => {
// https://stackoverflow./a/34487069/383904
const AUD = new Audio(),
BTNS = document.querySelectorAll("[data-audio]");
function playPause() {
const src = this.dataset.audio;
if (AUD.src != src) AUD.src = src;
AUD[AUD.paused ? "play" : "pause"]();
BTNS.forEach(el => el.classList.remove("pause"));
this.classList.toggle("pause", !AUD.paused);
}
AUD.addEventListener("ended", playPause);
BTNS.forEach(el => el.addEventListener("click", playPause));
})();
[data-audio]{cursor:pointer;}
[data-audio].pause{color: #0ac;}
/*https://fortawesome.github.io/Font-Awesome/cheatsheet/*/
[data-audio]:before{content:"\f144";}
[data-audio].pause:before{content:"\f28b";}
<link href="https://maxcdn.bootstrapcdn./font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" >
<a class="fa"
data-audio="http://upload.wikimedia/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg">
ACDC: Back in Black</a><br>
<a class="fa"
data-audio="https://upload.wikimedia/wikipedia/en/3/39/Metallica_-_Enter_Sandman.ogg">
Metallica:Enter Sandman</a><br>
<a class="fa"
data-audio="https://upload.wikimedia/wikipedia/en/5/5e/U2_One.ogg">
U2: One</a><br>
(Actual Answer:)
- Don't use inline JS, keep your JS logic in one place
- Use
addEventListener
and the correct camelCasestyle.backgroundImage
(orstyle["background-image"]
if you will) - (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");
// or use: audio.classList.toggle("pause", isPaused)
}
btn_playPause.addEventListener("click", losAudio_playPause);
#btn_playPause{
background:url(https://i.sstatic/ENFH5.png) no-repeat;
border:none;
width:32px;
height:32px;
cursor:pointer;
outline:none;
}
<audio id="losAudio" src="http://upload.wikimedia/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg">Audio not supported</audio>
<button id="btn_playPause"></button>
.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;
}
and if no other classes are involved,
document.getElementById("btn_playPause").className = "playPlay";
or
document.getElementById("btn_playPause").className = "playPause";
the icons might not be exactly right but I would just change class name instead of messing with the images.
You need to use document.body.style.backgroundImage = "url(...)
. Note backgroundImage
not background-image
which is a css property.
Also it is better to use class rather than inline CSS since inline CSS have highest precedence and it will trouble you if you want to change it Below snippet can help you 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
NOTE: classList.add()
is used when you want to have multiple class on an element.Simillarly you can you classList.remove()
to remove a class from an element.
This is just demo you can change as required
本文标签: javascriptToggle multiple Audio PlayPauseStack Overflow
版权声明:本文标题:javascript - Toggle multiple Audio Play-Pause - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742123466a2421830.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论