I think it’s keyup,
So that pressing enter on the keyboard will work also.
https://jsfiddle.net/gceak7z0/10/
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
button.addEventListener("click", function() {
if (player.paused) {
player.play();
} else {
player.pause();
}
});
sent.addEventListener("click", function() {
player.src = value.value;
player.volume = 1.0;
});
}());
Use it as an argument in addListener
i.e. replace “click”
I don’t understand how it would be written:
Like this:
sent.addEventListener("keyup", function() {
I wasn’t able to get it working in the code because I don’t know how any of this would be written.
I wasn’t able to get it working in the code because I don’t know how any of this would be written.
Poster above linked the MDN doc where you can see examples. I suggesting googling around and trying things out instead of asking people to solve it for you. When you have tried everything you can and still don’t get it to work you can submit your code and ask for help.
What exactly is it you want, to run play/pause with enter or to submit the input with set or by enter?
Here is a short example of how it works, you can try and figure out how to add it to your code 
inside the function (){ } is where you put the thing that happens when you press keyup
if there is a value that you want to change then put it in the function.
I assume you want to add 1 or something the volume value.
you player you are trying to use probably has some documentation that tells you what to do to change the volume. i don’t currently know how to do that but that would be a good place to start.
Does form have to be used with the code?
Will the code work without using form?
My attempt:
https://jsfiddle.net/gceak7z0/16/
no sound is playing when enter is pressed.
It worked for me. I had to click set before play then it could play and pause.
You might have to do another event listener for “enter”. Their might be cleaner way to do it though without having to repeat youtself but im not sure.
You dont always have to use form for the input to work but its good practice.
Did it work when you pressed ‘enter’ on the keyboard? Did it start playing?
Good practice, or should only be used when there’s a need for it?
This is what I was told about using form:
<form> should be used when you want to submit an entire set of data somehow to the server. The advantages of using form is that you have access to the form API (such as the submit event), and that you can perform serialization of all user inputs in the element. However, in this case, you are simply capturing individual user inputs, so there isn’t a need to use it.
The keypress event listener on value will only fire if the input has focus. Also, it doesn’t do anything right now in the link you posted (well it runs an alert).
I would consider looking into event delegation as well.
Would this be how it’s done then?
Here:
https://jsfiddle.net/6wteuL1c/2/
And Here:
https://jsfiddle.net/29sm1zet/8/
Pressing enter here makes it play.
Did I do this right?
<form>
<div class="container ">
<div class="container-left">
<label for="input">Stream</label>
<input id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" />
</div>
<div class="container-right">
<input id="sent" type="submit" value="Set" />
</div>
</div>
</form>
sent.addEventListener("click", function(evt) {
player.src = value.value;
player.volume = 1.0;
evt.preventDefault();
});
Do you want it to run when you press Set, Play/Pause and Enter?
Or just Play/Pause and Enter?
Set, Play/Pause and Enter
Do I have the code set good?
Enter or Set to begin the audio.
Button to pause or play.
(function iife() {
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
/* Adding listeners, the window will listen for the keypress event, buttons listens for click */
button.addEventListener('click', startPlayer);
sent.addEventListener('click', startPlayer)
window.addEventListener('keypress', startPlayer, false);
function startPlayer(e){
let key = e.which || e.keyCode || 0;
if(key === 13 || e.target.id === "button" || e.target.id === "sent"){
if (player.paused) {
player.src = value.value;
player.volume = 1.0;
player.play();
} else {
player.pause();
}
}
}
}());
What was wrong with doing it this way?
https://jsfiddle.net/29sm1zet/8/
sent.addEventListener("click", function(evt) {
player.src = value.value;
player.volume = 1.0;
evt.preventDefault();
});
I cleaned the code up here:
https://jsfiddle.net/6wteuL1c/15/
This would be placed twice?
evt.preventDefault();
I could place it once at the end like this:
Is that better?
https://jsfiddle.net/6wteuL1c/21/
function startPlayer(evt) {
let key = evt.which || evt.keyCode || 0;
if (key === 13 || evt.target.id === "button" ||
evt.target.id === "sent") {
if (player.paused) {
player.src = value.value;
player.volume = 1.0;
player.play();
} else {
player.pause();
}
evt.preventDefault();
}
}
Code:
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
function startPlayer(evt) {
let key = evt.which || evt.keyCode || 0;
if (key === 13 || evt.target.id === "button" ||
evt.target.id === "sent") {
if (player.paused) {
player.src = value.value;
player.volume = 1.0;
evt.preventDefault();
player.play();
} else {
player.pause();
evt.preventDefault();
}
}
}
button.addEventListener("click", startPlayer);
sent.addEventListener("click", startPlayer);
window.addEventListener("keypress", startPlayer, false);
}());
You dont need to put it in twice. Just put it before the first if statement.
Like this then:
https://jsfiddle.net/6wteuL1c/23/
function startPlayer(evt) {
const key = evt.which || evt.keyCode || 0;
evt.preventDefault();
if (key === 13 || evt.target.id === "button" ||
evt.target.id === "sent") {
if (player.paused) {
player.src = value.value;
player.volume = 1.0;
player.play();
} else {
player.pause();
}
}
}