asasass
November 14, 2017, 12:37pm
63
I made a playbutton for it.
<style>
.playButton {
width: 50px;
height: 50px;
cursor: pointer;
background-color: #000000;
fill: #aaff00;
}
.playButton.playing {
background-color: #000000;
}
</style>
<div class="playButton">
<svg class="play" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
<svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
<path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
</div>
<audio id="player" preload="none">
<source src="http://hi5.1980s.fm/;" type="audio/mpeg">
</source>
</audio>
<script>
(function iife() {
"use strict";
function playButtonClickHandler() {
var button = document.querySelector(".playButton");
var player = document.querySelector("#player");
player.volume = 1.0;
if (player.paused) {
button.classList.add("playing");
document.querySelector(".playButton .play").style.display = "none";
document.querySelector(".playButton .pause").style.display = "inline-block";
player.play();
} else {
button.classList.remove("playing");
document.querySelector(".playButton .play").style.display = "inline-block";
document.querySelector(".playButton .pause").style.display = "none";
player.pause();
}
}
var playButton = document.querySelector(".playButton");
playButton.addEventListener("click", playButtonClickHandler);
}());
</script>
asasass
November 15, 2017, 8:47am
64
After I do one, I should be able to implement it on the other also.
Playbutton:
I would need to bind it to each of these.
I added the buttons to both jsfiddles.
no-margin
with margin:
https://jsfiddle.net/0yxvpa09/25/
Version 1: Audio initiates after you click on the image
Play, click, audio starts, see pause button.
Version 2: Audio initiates only if you click on the button after the cover screen.
Just a regular play/pause after cover.
cover, click, see play
asasass
November 15, 2017, 11:27pm
65
I was able to do this, but not implemented in the proper way you have set up.
Button no-margin
Button margin
asasass
November 15, 2017, 11:57pm
66
Basing it off of your example, I did something like this but now Iām confused.
Iām going to need to wait till you get back to set this up the proper way.
<script>
(function iife() {
"use strict";
function playButtonClickHandler() {
var button = document.querySelector(".playButton");
var player = document.querySelector("#player");
player.volume = 1.0;
if (player.paused) {
button.classList.add("playing");
document.querySelector(".playButton .play").classList.add("hide");
document.querySelector(".playButton .pause").classList.remove("hide");
player.play();
} else {
button.classList.remove("playing");
document.querySelector(".playButton .play").style.display = "inline-block";
document.querySelector(".playButton .pause").style.display = "none";
player.pause();
}
}
function playButton(button, player, play, pause) {
...
play.classList.add("hide");
pause.classList.remove("hide");
...
play.classList.remove("hide");
pause.classList.add("hide");
...
}
function playButtonClickHandler() {
var button = evt.target;
playButton({
button: button,
player: document.querySelector("#player"),
play: button.querySelector(".play"),
pause: button.querySelector(".pause")
});
}
asasass:
Basing it off of your example, I did something like this but now Iām confused.
Iām going to need to wait till you get back to set this up the proper way.
I havenāt looked at any of the code that youāve posted here because I am not in to interpreting chicken gizzards for signs.
Please explain in words what you want to achieve, and give a link to code that is currently not doing what you want to achieve.
2 Likes
asasass
November 19, 2017, 11:22pm
70
I have 2 versions of this code.
1st Version
One where when you click on it, it starts playing right away.
2nd Version
And another where when you click on it, it doesnāt start playing right away.
1st Version
Is there anything wrong with how the javascript is set up?
<script>
(function iife() {
"use strict";
document.querySelector(".myLink1").classList.add("hide");
function playButtonClickHandler() {
document.querySelector(".myLink1").classList.remove("hide");
var button = document.querySelector(".playButton1");
var player = document.querySelector("#player1");
document.querySelector(".playButton1 .initial1").style.display = "none";
player.volume = 1.0;
if (player.paused) {
button.classList.add("playing");
document.querySelector(".playButton1 .play1").style.display = "none";
document.querySelector(".playButton1 .pause1").style.display = "inline-block";
player.play();
} else {
document.querySelector(".playButton1 .play1").style.display = "inline-block";
document.querySelector(".playButton1 .pause1").style.display = "none";
player.pause();
}
}
var playButton = document.querySelector(".playButton1");
playButton.addEventListener("click", playButtonClickHandler);
}());
</script>
2nd Version:
Is there anything wrong with how the javascript is set up? And if there is, whatās wrong with it?
<script>
(function iife() {
"use strict";
document.querySelector(".myLink1").classList.add("hide");
var playButton = document.querySelector(".playButton1");
playButton.addEventListener("click", firstClick);
var player = document.querySelector("#player1");
function firstClick() {
document.querySelector(".myLink1").classList.remove("hide");
var button = document.querySelector(".playButton1");
document.querySelector('.playButton1 .initial1').style.display = 'none';
playButton.addEventListener("click", playButtonClickHandler);
document.querySelector(".playButton1 .play1").style.display = "inline-block";
document.querySelector(".playButton1 .pause1").style.display = "none";
button.classList.add("playing");
}
function playButtonClickHandler() {
player.volume = 1.0;
if (player.paused) {
document.querySelector(".playButton1 .play1").style.display = "none";
document.querySelector(".playButton1 .pause1").style.display = "inline-block";
player.play();
} else {
document.querySelector(".playButton1 .play1").style.display = "inline-block";
document.querySelector(".playButton1 .pause1").style.display = "none";
player.pause();
}
}
}());
</script>
Please take your CSS code over to the CSS forum.
When you have any questions relating to JavaScript, that then is a good time to post in the JavaScript channel about your code.
The click handler should have one one or two lines of code in it, handing off control to well-named functions. That helps to give you a better idea of what the code is supposed to do.
Too many class names
myLink1
is used twice when assigning it to a variable results in less complexity.
playButton1
is used seven times!! Only once is all thatās needed.
#player1
doesnāt need to be used at all. Put it inside the play button with the SVG code, and you can then more easily find it, and acces sit without needing any unique identifier.
You access the pay/pause buttons too many times. Assign them to variables and use those variables instead.
Accessing the DOM is expensive in terms of time for the browser to make the request, so reducing how much the DOM is accessed results in big performance gains.
style.display is bad - stop using it. Use classList.add/remove instead.
With the second code, the above information is all relevant to that code too.
Bad function name. firstClick
might tell you what happens, but tells you nothing about what that function is supposed to do. Thatās as bad as using a āredā classname, because when the style is changed to be orange instead, you then have a āredā class that makes things orange. The function name of showLinks
would be much more appropriate than firstClick.
Also, the second code assigns an event listener before the function. The code related to adding the event listener should appear below the function. It is preferable to have the functions grouped together, with all of the other code organised after all of the functions.
1 Like
asasass
November 20, 2017, 12:34am
74
Letās start with the 1st code:
<script>
(function iife() {
"use strict";
document.querySelector(".myLink1").classList.add("hide");
function playButtonClickHandler() {
document.querySelector(".myLink1").classList.remove("hide");
var button = document.querySelector(".playButton1");
var player = document.querySelector("#player1");
document.querySelector(".playButton1 .initial1").style.display = "none";
player.volume = 1.0;
if (player.paused) {
button.classList.add("playing");
document.querySelector(".playButton1 .play1").style.display = "none";
document.querySelector(".playButton1 .pause1").style.display = "inline-block";
player.play();
} else {
document.querySelector(".playButton1 .play1").style.display = "inline-block";
document.querySelector(".playButton1 .pause1").style.display = "none";
player.pause();
}
}
var playButton = document.querySelector(".playButton1");
playButton.addEventListener("click", playButtonClickHandler);
}());
</script>
asasass
November 20, 2017, 12:36am
75
We can start with how to do this first.
This will help with all my other codes too.
I donāt understand how you do this. You mentioned this in another post too.
Here is how you assign a reference to an HTML element to a variable.
var playButton = document.querySelector(".playButton");
From then on, you can use playButton
to refer to that HTML element. For example, to get the <audio>
element thatās in the playButton element.
var player = playButton.querySelector("audio");
asasass
November 20, 2017, 12:41am
77
Like that?
<script>
(function iife() {
"use strict";
document.querySelector(".myLink1").classList.add("hide");
function playButtonClickHandler() {
document.querySelector(".myLink1").classList.remove("hide");
var button = document.querySelector(".playButton1");
var player = document.querySelector("#player1");
document.querySelector(".initial1").style.display = "none";
player.volume = 1.0;
if (player.paused) {
button.classList.add("playing");
document.querySelector(".play1").style.display = "none";
document.querySelector(".pause1").style.display = "inline-block";
player.play();
} else {
document.querySelector(".play1").style.display = "inline-block";
document.querySelector(".pause1").style.display = "none";
player.pause();
}
}
var playButton = document.querySelector(".playButton1");
playButton.addEventListener("click", playButtonClickHandler);
}());
</script>
asasass
November 20, 2017, 12:44am
78
Replace
.style.display = "none";
with this
.classList.remove("hide");
Replace
.style.display = "inline-block";
with this
.classList.add("inline-block");
asasass:
Like that?
Like what? I am not wasting time investigating and doing a line-by-line comparison with the many versions of your other code today. I am not interpreting signs from chicken gizzards today.
Use your words, and tell me the changes that you made to your code.
1 Like
asasass
November 20, 2017, 12:47am
80
this
document.querySelector(".playButton1 .initial1").style.display = "none";
document.querySelector(".playButton1 .play1").style.display = "none";
document.querySelector(".playButton1 .pause1").style.display = "inline-block";
document.querySelector(".playButton1 .play1").style.display = "inline-block";
document.querySelector(".playButton1 .pause1").style.display = "none";
to this
document.querySelector(".initial1").style.display = "none";
document.querySelector(".play1").style.display = "none";
document.querySelector(".pause1").style.display = "inline-block";
document.querySelector(".play1").style.display = "inline-block";
document.querySelector(".pause1").style.display = "none";
asasass:
Like that?
No, the code still has ādocumentā as the base instead of the ā.playButton1ā element as the base.
asasass
November 20, 2017, 12:49am
82
like this?
playButton1.querySelector(".initial1").style.display = "none";
playButton1.querySelector(".play1").style.display = "none";
playButton1.querySelector(".pause1").style.display = "inline-block";
playButton1.querySelector(".play1").style.display = "inline-block";
playButton1.querySelector(".pause1").style.display = "none";
Close, but the base name used needs to be the same as the variable name used to reference what was selected
var playButton = document.querySelector(".playButton1");
asasass
November 20, 2017, 12:55am
84
That goes in this part?
Iām way confused.
function playButtonClickHandler() {
document.querySelector(".myLink1").classList.remove("hide");
var button = document.querySelector(".playButton1");
var player = document.querySelector("#player1");
document.querySelector(".initial1").style.display = "none";
player.volume = 1.0;
if (player.paused) {