asasass
November 20, 2017, 5:09am
146
Change player text to all audio?
(function iife() {
"use strict";
document.querySelector(".myLink").classList.add("hide");
function playButtonClickHandler() {
document.querySelector(".myLink").classList.remove("hide");
var button = document.querySelector(".playButton");
var audio = playButton.querySelector("audio");
playButton.querySelector(".initial").classList.add("hide");
audio.volume = 1.0;
if (audio.paused) {
button.classList.add("playing");
playButton.querySelector(".play").classList.add("hide");
playButton.querySelector(".pause").classList.remove("hide");
audio.play();
} else {
playButton.querySelector(".play").classList.remove("hide");
playButton.querySelector(".pause").classList.add("hide");
audio.pause();
}
}
var playButton = document.querySelector(".playButton");
playButton.addEventListener("click", playButtonClickHandler);
}());
No, donāt change the scripting code at all. That doesnāt need to change for the audio problem currently being worked on.
Iām trying to help you to understand what the problem is, so that once you understand it you can take steps to fix the problem.
Currently you seem to misunderstand something, so I am trying to draw out from you information that can help us to correct that misunderstanding.
Why do you think that in the HTML code at https://jsfiddle.net/87serhpf/1/ that the <audio>
element is inside of the element called playButton?
1 Like
asasass
November 20, 2017, 5:12am
148
Without it the audio doesnāt play.
I want you to answer the question that Iāve asked of you, because that will lead you to the solution.
Why do you think that in the HTML code at https://jsfiddle.net/87serhpf/1/ that the <audio>
element is inside of the element called playButton?
Let me make this easier for you.
Find the HTML <audio>
element in the HTML code at https://jsfiddle.net/87serhpf/1/ and also find the element with a classname of āplayButtonā
You said that the audio element is inside of the playButton element. Why do you think that it is inside?
1 Like
asasass
November 20, 2017, 5:16am
151
var player = document.querySelector("audio");
What Iām asking you has nothing to do with the JavaScript.
asasass:
It works now.
It does because you have made the code less efficient, and totally incapable of being used with multiple players.
You still fail to understand what Iāve been trying to help you to understand. Can you please answer this simple question?
You said that the <audio>
element is inside of the playButton element. Why do you think that it is inside?
1 Like
asasass
November 20, 2017, 5:20am
155
Technically itās not. Thereās no div tag behind it.
<div class="playButton">
<div class="initial">Links </div>
<svg class="pause hide" style="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>
<svg class="play hide " 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>
</div>
</div>
<audio preload="none">
<source src="http://hi5.1980s.fm/;" type="audio/mpeg">
</audio>
1 Like
asasass:
Technically itās not.
Thank you. Thatās why button.querySelector wasnāt finding the audio element.
Put the code back to button.querySelector, and put the <audio>
element inside of the bloody playButton.
Then it will work.
asasass
November 20, 2017, 5:23am
157
no it wonāt.
Why isnāt document instead of playButton?
It works like that though?
var player = document.querySelector("audio");
var button = document.querySelector(".playButton");
var player = playButton.querySelector("audio");
asasass:
no it wonāt.
My repetition of playButton resulted in an error in the suggested code, which should have been button instead.
Iāve corrected that error in the above post.
From what I see in https://jsfiddle.net/87serhpf/5/ youāve put the <audio>
element inside of the wrap, but the <audio>
element is still not inside of the playButton element.
When it is, the following code will work:
var player = button.querySelector("audio");
Why document.querySelector is the wrong approach, is that it will always find only the first audio element on the page, which cannot work when you have multiple audio elements.
Move the <audio>
element inside of the playButton element, and button.querySelector will be able to properly do its job.
I now must leave, but will return in a while.
asasass
November 20, 2017, 5:31am
159
var button = document.querySelector(".playButton");
var player = playButton.querySelector("audio");
should be:
var button = document.querySelector(".playButton");
var button = button.querySelector("audio");
I didnāt get it.
asasass
November 20, 2017, 6:31am
160
Not like this? Are you sure?
var button = document.querySelector(".playButton");
var player = playButton.querySelector("audio");
Wait a second, itās button , isnāt it?
Like this?
var button = document.querySelector(".playButton");
var player = button.querySelector("audio");
Basing it off a previous code:
function playButton(event) {
var button = getButton(event.target);
var player = button.querySelector("audio");
var play = button.querySelector(".play2");
var pause = button.querySelector(".pause2");
var speaker = button.querySelector(".speaker2");
button.classList.add("clicked");
asasass
November 20, 2017, 7:12am
162
If you say this is fine, Iāll start working on the 2nd version.
Now I know itās not fine, so Iām still on this one.
<style>
.wrap1 {
position: relative;
display: table;
white-space: nowrap;
background: red;
}
.initial1 {
width: 260px;
height: 168px;
cursor: pointer;
background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
border: 3px solid #0059dd;
font-family: Tahoma;
font-weight: bold;
font-size: 30px;
color: #0059dd;
cursor: pointer;
line-height: 100px;
text-align: center;
}
.playButton1.playing {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 50px;
height: 50px;
cursor: pointer;
background-color: #000000;
box-Shadow: inset 0 0 0 3px #0059dd;
fill: #aaff00;
}
.play1 {
position: absolute;
left: 9px;
top: 5px;
width: 38px;
height: 40px;
}
.pause1 {
position: absolute;
left: 7px;
top: 5px;
width: 36px;
height: 40px;
}
.link1 div {
margin: 0 0 12px 0;
height: 50px;
}
.link1 a {
display: inline-block;
width: 50px;
height: 50px;
background: black;
box-Shadow: inset 0 0 0 3px #0059dd;
}
.hide {
display: none;
}
.link1 div:last-child {
margin-bottom: 0;
}
</style>
<div class="wrap1">
<div class="myLink1">
<div class="link1">
<div>
<a href="#" target="_blank"></a>
<a href="#" target="_blank"></a>
<a href="#" target="_blank"></a>
<a href="#" target="_blank"></a>
<a href="#" target="_blank"></a>
</div>
<div>
<a href="#" target="_blank"></a>
<a href="#" target="_blank"></a>
<a href="#" target="_blank"></a>
<a href="#" target="_blank"></a>
<a href="#" target="_blank"></a>
</div>
<div>
<a href="#" target="_blank"></a>
<a href="#" target="_blank"></a>
<a href="#" target="_blank"></a>
<a href="#" target="_blank"></a>
<a href="#" target="_blank"></a>
</div>
</div>
</div>
<div class="playButton1">
<div class="initial1">Links </div>
<svg class="pause1 hide" 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>
<svg class="play1 hide" 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>
<audio preload="none">
<source src="http://hi5.1980s.fm/;" type="audio/mpeg">
</audio>
</div>
</div>
<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 = button.querySelector("audio");
playButton.querySelector(".initial1").classList.add("hide");
player.volume = 1.0;
if (player.paused) {
button.classList.add("playing");
playButton.querySelector(".play1").classList.add("hide");
playButton.querySelector(".pause1").classList.remove("hide");
player.play();
} else {
playButton.querySelector(".play1").classList.remove("hide");
playButton.querySelector(".pause1").classList.add("hide");
player.pause();
}
}
var playButton = document.querySelector(".playButton1");
playButton.addEventListener("click", playButtonClickHandler);
}());
</script>
asasass
November 20, 2017, 7:13am
163
You access the play/pause buttons too many times. Assign them to variables and use those variables instead.
Is this still the case?
What exactly do you mean, Assign them to variables?
asasass
November 20, 2017, 7:16am
164
Am I supposed to do something regarding what you said here?
I should assign myLink1 to a variable?
Yes, thatās right. From the document comes the button, and from the button comes the player.
You assign something to a variable using the var statement. For example:
var play = button.querySelector(".play");
var pause = button.querySelector(".pause");
That way, you can use play.classList.add(āhideā) which uses the already-existing reference to the play button, instead of having to search the Document Object Model (DOM) all over again for it.