How to toggle audio play/pause with one button - javascript

I never really worked with javascript before, but I tried googling for a solution to how to make a play/pause button for audio - and I found what appears to be a good and simple solution on this site:
How to toggle audio play() pause() with one button or link?
(PS. I don't have reputation poins enough to comment on Iceman's solution and ask him directly what might be wrong - I would have if I could.)
But, when I paste the code snippets into my document, nothing happens (the resulting text isn't clickable).
Could some of you take a look and tell me what I'm doing wrong? It's very possible it's something stupid, but I can't see it myself.
Index.html so far:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Ukendt Navn ...</title>
<script>
var myAudio = document.getElementById("myAudio");
var isPlaying = false;
function togglePlay() {
if (isPlaying) {
myAudio.pause()
} else {
myAudio.play();
}
};
myAudio.onplaying = function() {
isPlaying = true;
};
myAudio.onpause = function() {
isPlaying = false;
};
</script>
<style type="text/css">
#content {
border: 1px solid blue;
margin: auto;
max-width: 20vw;
margin-top: 30vw;
color: black;
}
</style>
</head>
<body>
<div id="content">
<audio id="myAudio" src="birds.mp3" preload="auto"></audio>
<a onClick="togglePlay()">Click here to hear.</a>
</div>
</body>
</html>
My test site: http://wyrdling.com/other/ukendtnavn/

You are trying to call document.getElementById("myAudio") before the element is loaded, therefore you can either call it after the page fully loaded, or place the script right before the end of body tag.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Ukendt Navn ...</title>
<script>
window.addEventListener('load', function(){
var myAudio = document.getElementById("myAudio");
myAudio.onplaying = function() {
isPlaying = true;
};
myAudio.onpause = function() {
isPlaying = false;
};
});
var isPlaying = false;
function togglePlay() {
if (isPlaying) {
myAudio.pause()
} else {
myAudio.play();
}
}
</script>
<style type="text/css">
#content {
border: 1px solid blue;
margin: auto;
max-width: 20vw;
margin-top: 30vw;
color: black;
}
</style>
</head>
<body>
<div id="content">
<audio id="myAudio" src="http://wyrdling.com/other/ukendtnavn/birds.mp3" preload="auto"></audio>
<a onClick="togglePlay()">Click here to hear.</a>
</div>
</body>
</html>

Related

How to display a div element when HTML5 video ends

I've been trying to do the following on my website's main page : a video in fullscreen plays (no controls, no loop, muted, autoplays, stored locally) and when it ends, the video is hidden and a div element shows.
I'm used to working with HTML and CSS but not so much JavaScript, so what I've done thus far is put the video, and used a checkbox to hide/show the elements (as shown here) and then tried to modify it so it would detect when the video ends, but I can't make it work.
The code I'm using is probably wrong, as it was meant for a checkbox, but I've also tried the solutions written there and it seems like the issue comes from the function used to detect when the video ends not working.
Here is what I've tried to automatize it :
#menudisplay {
display: none;
text-align: center;
margin-top: 20vh;
font-family: 'Montserrat';
}
#menudisplay ul {
list-style-type: none;
}
#menudisplay ul li {
padding: 110px;
}
.style {
width: 100vw;
height: 100vh;
object-fit: contain;
position: fixed;
top: 0;
left: 0;
z-index: -1;
background-color:lightgray;
}
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<meta http-equiv="Content-Type" content="charset=UTF-8" />
<link rel="stylesheet" href="./mystyle.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Amatic SC|Montserrat' rel='stylesheet'>
</head>
<video autoplay muted class="style">
<source src="./video.mp4" type="video/mp4">
The video is not working.
</video>
<div id="menudisplay">
<img class="style" src="./img.jpg">
<ul>
<li>
EXEMPLE 1
</li>
<li>
EXEMPLE 2
</li>
</ul>
</div>
<script>
function myFunction() {
var video = document.getElementById("video");
var menudisplay = document.getElementById("menudisplay");
if (video.ended == true) {
menudisplay.style.display = "block";
video.style.display = "none";
} else {
menudisplay.style.display = "none";
}
}
</script>
</html>
I use Visual Studio Code and my web browser is Edge.
Thank you in advance, I'm really stuck !
In this example I added both an evenlistener for DOMContentLoaded (for making sure that the document has been loaded) and for the video ending.
document.addEventListener('DOMContentLoaded', e => {
var video = document.getElementById("video");
var menudisplay = document.getElementById("menudisplay");
video.addEventListener('ended', e => {
menudisplay.style.display = "block";
video.style.display = "none";
});
});
#menudisplay {
display: none;
text-align: center;
margin-top: 20vh;
font-family: 'Montserrat';
}
#menudisplay ul {
list-style-type: none;
}
#menudisplay ul li {
padding: 110px;
}
.style {
width: 100vw;
height: 100vh;
object-fit: contain;
position: fixed;
top: 0;
left: 0;
z-index: -1;
background-color: lightgray;
}
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<meta http-equiv="Content-Type" content="charset=UTF-8" />
<link rel="stylesheet" href="./mystyle.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Amatic SC|Montserrat' rel='stylesheet'>
</head>
<body>
<video autoplay muted class="style" id="video">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
<p>The video is not working.</p>
</video>
<div id="menudisplay">
<img class="style" src="./img.jpg">
<ul>
<li>
EXEMPLE 1
</li>
<li>
EXEMPLE 2
</li>
</ul>
</div>
</body>
</html>
this should work,
const video = document.querySelector('video');
const menuDisplay = document.querySelector('#menudisplay');
video.addEventListener('ended', (event) => {
menuDisplay.style.display = 'block';
//you can also do things with 'event' obj
});
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event
you can use this script to detect when the video finished and what should be displayed after that:
video not supported
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
}
</script>
like the others.
var video = document.getElementById("video");
var videoPl = document.getElementById("menudisplay");
video.addEventListener('ended', function(e) {
videoPl.style.display = 'block'
})
https://www.w3schools.com/jsref/event_onended.asp

Make iframe immediately run when site is launched

When I open the site I want the iframe to immediately run code that I have already put in (<p>hello</p>).
But the code doesn't get executed, I have to put a space or do something before it runs.
If you can't get that to work, a run button will also work.
function compile() {
var html = document.getElementById("html");
var code = document.getElementById("code").contentWindow.document;
document.body.onkeyup = function() {
code.open();
code.writeln(
html.value
);
code.close();
};
}
compile();
#html {
width: 95em;
}
textarea {
width: 32%;
float: top;
min-height: 250px;
overflow: scroll;
margin: auto;
display: inline-block;
background: #f4f4f9;
outline: none;
font-family: Courier, sans-serif;
font-size: 14px;
}
iframe {
bottom: 0;
position: relative;
width: 100%;
height: 35em;
}
<html>
<head>
<title>Code Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<textarea id="html"><p>hello</p></textarea>
<iframe id="code"></iframe>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
The code that writes to the iframe is within an onkeyup event. Nothing will be written until a key is pressed and released. To solve your problem, simply write to the iframe outside of the onkeyup event when the compile function is called as in the example below.
function compile() {
var html = document.getElementById("html");
var code = document.getElementById("code").contentWindow.document;
code.open();
code.writeln(html.value);
code.close();
document.body.onkeyup = function() {
code.open();
code.writeln(html.value);
code.close();
};
}
compile();
You have to change your function to make it say .onload instead of .onkeyup like this:
function compile() {
var html = document.getElementById("html");
var code = document.getElementById("code").contentWindow.document;
document.body.onload = function() {
code.open();
code.writeln(
html.value
);
code.close();
};
}
compile();
You could also add a second function with a different name that does the same thing as the original function so that it still changes when you change the code:
function change() {
var html = document.getElementById("html");
var code = document.getElementById("code").contentWindow.document;
document.body.onkeyup = function() {
code.open();
code.writeln(
html.value
);
code.close();
};
}
change();

One of Multiple Scripts in HTML Sheet Not Working

I am trying to have multiple scripts run in my html sheet, and it seems to not be working. All the other scripts work except for the script for the blinking function. I don't see what the problem is. Can you find the issue with my code? Thanks in advance!
Here is my code below:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: coral;
color: white;
}
.text2{
color: white;
width: 100px;
float: right;
padding-top: 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").on('click',function(){
$("p").hide();
$(".text2").hide()
$('body').css("background", "black");
});
});
</script>
<script>
//blink
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
</script>
</head>
<body>
<p>This is a paragraph.</p>
</div>
<div class="text2">
-- : --
</div>
<button class="btn1">online</button>
</body>
</html>
The second script must be inside a JQuery function.
$(document).ready(function(){
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
});
The second script's contents should be in the document ready handler otherwise the code attempts to locate and work with the .text2 element before that element has been parsed into memory.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: coral;
color: white;
}
.text2{
color: white;
width: 100px;
float: right;
padding-top: 10px;
}
</style>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").on('click',function(){
$("p").hide();
$(".text2").hide()
$('body').css("background", "black");
});
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
} else {
element.show();
}
shown = !shown;
}
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<div class="text2">-- : --</div>
<button class="btn1">online</button>
</body>
</html>

Traffic light using javascript

I want create traffic light controller.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>isiqfor</title>
<link rel="stylesheet" href="style.css">
</head>
<body onload="timer;">
<div id="isiqfor">
<div class="green"></div>
<div class="yellow"></div>
<div class="red"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS code:
#isiqfor{
border: 10px solid black;
padding: 10px 3px;
width: 50px;
}
#isiqfor>div{
width:50px;
height: 50px;
border-radius: 50%;
opacity: .3;
}
.green{
background-color: green;
}
.yellow{
background-color: yellow;
}
.red{
background-color: red;
}
And JS file:
function myFun () {
// body...
var green=document.getElementsByClassName("green")[0];
var red=document.getElementsByClassName("red")[0];
var yellow=document.getElementsByClassName("yellow")[0];
green.style.opacity=1;
setTimeout(function () {
/* body... */
green.style.opacity=.3;
red.style.opacity=.3;
yellow.style.opacity=1;
},5000);
setTimeout(function () {
/* body... */
green.style.opacity=.3;
red.style.opacity=1;
yellow.style.opacity=.3;
},7000);
setTimeout(function () {
/* body... */
green.style.opacity=1;
red.style.opacity=.3;
yellow.style.opacity=.3;
},12000);
}
var timer = setInterval(function () {
/* body... */
myFun()
},13000);
But problem is when page loads it must wait 13 second for beginning traffic light.How can solve this problem? I want when page loads green light has switched.
Have you tried calling myFun straight away after your timer is set? See the call to myFun added to the bottom of the following code:
var timer = setInterval(function () {
/* body... */
myFun()
},13000);
myFun();//Call 'myFun' straight away...
I created a simple traffic light system! Try this one.
I used jquery to simplify the attribute selection.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Traffic Lights</title>
</head>
<body>
<p>Demonstrate traffic lights system</p>
<div id="div1" style="width:80px;height:80px;background-color:white;border: 1px solid #000;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:white;border: 1px solid #000;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:white;border: 1px solid #000;"></div>
</body>
<script>
$(document).ready(function () {
var state = 0;
setInterval(function () {
// state 0 > STOP
// state 1 > READY
// state default > GO
switch (state) {
case 0:
state = 1;
$('#div3').css({ 'background-color': 'white' });
$('#div1').css({ 'background-color': 'red' });
break;
case 1:
state = 3
$('#div1').css({ 'background-color': 'white' });
$('#div2').css({ 'background-color': 'yellow' });
break;
default:
state = 0;
$('#div2').css({ 'background-color': 'white' });
$('#div3').css({ 'background-color': 'green' });
}
}, 2000);
});
</script>
</html>

How to handle onclick event of a button?

In the below code,
<!DOCTYPE html>
<html>
<head>
<title>Button events</title>
<meta charset="UTF-8">
<style type="text/css">
button{
background-color: #00FFFF;
border: 2px solid orange;
border-radius: 10px;
width: 60px;
height: 30px;
color:white;
}
</style>
</head>
<body>
<script type="text/javascript">
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.background-color = "#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.background-color="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
</script>
<button type="button" name="LikeUnlike">Like</button>
</body>
</html>
error is thrown at line document.body.lastElementChild.style.background-color = "#FF9966";. Error is Invalid left-hand side in assignment.
How do I resolve this error?
Note: yet to learn JQuery
First of all you need to use element.style.backgroundColor instead of element.style.background-color.
Here is a list of the JS equivalent of CSS attributes.
Your second problem is that your script executed before the <button> is loaded, thus making the script the current lastElementChildof body.
You can solve this by wrapping your script in window.onload:
(Also, selecting your button with document.body.lastElementChild is bound to give you errors since you most likely at some point will add something after the button)
<!DOCTYPE html>
<html>
<head>
<title>Button events</title>
<meta charset="UTF-8">
<style type="text/css">
button {
background-color: #00FFFF;
border: 2px solid orange;
border-radius: 10px;
width: 60px;
height: 30px;
color: white;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var likeButton = document.getElementById("like-button");
likeButton.onclick = changeColor;
function changeColor() {
if (likeButton.innerHTML == "Like") {
likeButton.style.backgroundColor = "#FF9966";
likeButton.innerHTML = "Unlike";
} else {
likeButton.style.backgroundColor = "#00FFFF";
likeButton.innerHTML = "Like";
}
}
}
</script>
<button type="button" name="LikeUnlike" id="like-button">Like</button>
</body>
</html>
background-color is not a valid JavaScript identifier. For setting it with DOM style object, it should be backgroundColor in camel case.
More info on DOM style object at http://www.w3schools.com/jsref/dom_obj_style.asp
Check out my demo
JS
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.backgroundColor = "#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.backgroundColor ="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
I think you should use document.body.lastElementChild.style["background-color"] to set color for element
not background-color but backgroundColor . Try this and see if works
document.body.lastElementChild.style.backgroundColor = "#FF9966";
the total code:
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.backgroundColor = "#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.backgroundColor ="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
You use this code. It is working fine.
<!DOCTYPE html>
<html>
<head>
<title>Button events</title>
<meta charset="UTF-8">
<style type="text/css">
button{
background-color: #00FFFF;
border: 2px solid orange;
border-radius: 10px;
width: 60px;
height: 30px;
color:white;
}
</style>
</head>
<body>
<script type="text/javascript">
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.backgroundColor =
"#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.backgroundColor="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
</script>
<button type="button" name="LikeUnlike" onclick="changeColor
()">Like</button>
</body>
</html>
You can use Jquery for assign or remove a css class, to add color to your button, with this code:
<script>
$(function() {
$('button').on('click', function() {
$(this).toggleClass('other-color');
});
});
</script>
the toggleClass function is to add and remove a css class,
"othercolor" is your class css with the styles to your button.
Include jquery with this script before </body> and before the code above:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
$('button').on('click', function() {
$(this).toggleClass('other-color');
});
});
</script>
I hope it helps you.

Categories