In the below snippet the intended behavior is to click on "Play", then the mp3 gets played and "Play" gets changed to "playing". However in my current browsers (Mozilla, Safari) I get the following: When clicking on "Play" it gets transformed to "playing" but no file is being played. Then, only when clicking on "playing" the file gets played. Why do I have to click two times? When commenting out the line "document.getElementById('player').innerHTML = 'playing';" the file gets immediately played after the first click.
<!doctype html>
<html>
<body>
<div id="player">Play</div>
<script>
audioEl = document.createElement("audio");
audioEl.setAttribute('src','audioFile.mp3');
document.getElementById('player').appendChild(audioEl);
document.getElementById('player').addEventListener('click',function() {
document.getElementById('player').innerHTML = 'playing';
audioEl.play();
});
</script>
</body>
</html>
innerHTML replaces all the content of the element, not only the text. After the creation of the audio tag, your HTML looks like this :
<!doctype html>
<html>
<body>
<div id="player">Play
<audio src='audioFile.mp3'>
</div>
</body>
</html>
So when you replace the content of the div with playing you remove <audio src='audioFile.mp3'>.
You have to add an element for the text in the div like this
<div id="player">
<div id="player-text"></div>
</div>
and use this javascript
audioEl = document.createElement("audio");
audioEl.setAttribute('src','audioFile.mp3');
document.getElementById('player').appendChild(audioEl);
document.getElementById('player').addEventListener('click',function() {
document.getElementById('player-text').innerHTML = 'playing';
audioEl.play();
});
You are replacing the .innerHTML of #player, including the <audio> element, at
document.getElementById('player').innerHTML = 'playing';
You can concatenate a #text node at #player .innerHTML using .innerHTML += "playing" or use .insertAdjacentHTML
<!doctype html>
<html>
<body>
<div id="player">Play</div>
<script>
audioEl = document.createElement("audio");
audioEl.setAttribute('src','audioFile.mp3');
document.getElementById('player').appendChild(audioEl);
document.getElementById('player').addEventListener('click',function() {
this.innerHTML += 'playing';
audioEl.play();
});
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<div id="player">Play</div>
<script>
audioEl = document.createElement("audio");
audioEl.setAttribute('src','audioFile.mp3');
document.getElementById('player').appendChild(audioEl);
document.getElementById('player').addEventListener('click',function() {
this.insertAdjacentHTML("beforeend", "playing");
audioEl.play();
});
</script>
</body>
</html>
Related
I want to create a submit button, when every time you click it, it plays a random audio file.
Is there a fast way to do this with HTML/JS?
<!doctype html>
<html>
<head>
<title>PlayAudio</title>
</head>
<body>
<script>
function playAudio() {
var audio = document.getElementById("MySound");
audio.play();
}
</script>
<input type="button" value="Play Audio" onclick="playAudio()">
<audio id="MySound" src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>
</body>
</html>
Suppose you have a project with files like this:
Project files
Then you can do in your HTML & JS code like this to make the sound played randomly when the submit button is clicked:
//Load the sound files into an array
const audioArr = [
new Audio('audio/audio1.ogg'),
new Audio('audio/audio2.ogg'),
new Audio('audio/audio3.ogg'),
new Audio('audio/audio4.ogg'),
new Audio('audio/audio5.ogg'),
new Audio('audio/audio6.ogg')
];
function playRandomAudio(){
//Get a random index of the sound to be played
const randomAudioIndex = Math.floor(Math.random() * (audioArr.length+1));
//Play the selected sound
audioArr[randomAudioIndex].play();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<input type="submit" value="Submit" onclick="playRandomAudio()">
<script src="test_sound.js"></script>
</body>
</html>
Hope this answers your question. 🙏
This is the script I am working with (below)
As the images are built into the script I am unsure on how to add a download link/link to website. to the second image
The script changes from image 1 to image 2 after 10 seconds and then I want then to be able to CLICK image 2 (like a button)
Here is the script I am working with if you could maybe help me with adding it in or tell me what I need to add in and where that would be much appreciated
<!DOCTYPE html>
<head>
<title>Demo</title>
</head>
<body>
<img id="img1" src="https://i.makeagif.com/media/1-28-2016/N_tuzx.gif" />
<script>
setTimeout(function(){
document.getElementById("img1").src = "https://2.bp.blogspot.com/-fgPjlOk4PWc/WzQrQ_NBxRI/AAAAAAAAAWw/bvINTos17nssgQXqhevQq97dvUfzINdhgCPcBGAYYCw/s320/download-2062197_960_720.png";
}, 10000);
</script>
</body>
</html>
Thank you for your time
After you've changed src of the image, just add a "click" event listener to it
setTimeout(function(){
document.getElementById("img1").src = "link";
document.getElementById("img1").addEventListener("click", function (event) {
// when someone clicks
});
}, 10000);
Use below code and replace Download_Link with desired link
<!DOCTYPE html>
<head>
<title>Demo</title>
</head>
<body>
<div id="wrapper">
<img id="img1" src="https://i.makeagif.com/media/1-28-2016/N_tuzx.gif" />
</div>
<script>
setTimeout(function(){
var mydiv = document.getElementById("img1");
var aTag = document.createElement('a');
aTag.setAttribute('href',"Download_Link");
aTag.setAttribute('download', true);
aTag.appendChild(mydiv);
document.getElementById("wrapper").appendChild(aTag);
document.getElementById("img1").src = "https://2.bp.blogspot.com/-fgPjlOk4PWc/WzQrQ_NBxRI/AAAAAAAAAWw/bvINTos17nssgQXqhevQq97dvUfzINdhgCPcBGAYYCw/s320/download-2062197_960_720.png";
}, 10000);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById("passage").innerHTML = "Paragraph changed!";
</script>
</head>
<body>
<div id="passage">hello</div>
<div id="question"></div>
<div id="answers"></div>
</body>
</html>
Why is document.getElementById("passage").innerHTML = "Paragraph changed!" not working for me? I just end up with a blank screen, not even the original "hello".
Your script is called before the element is loaded, try calling the script after loading element
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="passage">hello</div>
<div id="question"></div>
<div id="answers"></div>
<script>
document.getElementById("passage").innerHTML = "Paragraph changed!";
</script>
</body>
</html>
If you check the console, you can see an error
Uncaught TypeError: Cannot set property 'innerHTML' of null
That is the HTML page is parsed and executed top down.
So, it can't identify what is the element you are mentioning.
So, you should either use an EventListener or place the script just before the end of body tag
Method 1 Event Listener
<!DOCTYPE html>
<html>
<head>
</head>
<script>
window.onload=function(){
document.getElementById("passage").innerHTML = "Paragraph changed!";
};
</script>
<body>
<div id = "passage">hello</div>
<div id = "question"></div>
<div id = "answers"></div>
</body>
</html>
Method 2 : script is just above body tag
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id = "passage">hello</div>
<div id = "question"></div>
<div id = "answers"></div>
<script>
document.getElementById("passage").innerHTML = "Paragraph changed!";
</script>
</body>
</html>
You script should be executed once the page is loaded.
Otherwise all elements of the page may not be still attached to the dom when you refer to them.
Rather than moving the script after the element declaration that may be error prone (you should always be aware of the order of script), you could use
event designed to be executed after the dom is totally loaded.
For example onload attribute of body :
<body onload='document.getElementById("passage").innerHTML = "Paragraph changed!";'>
Your script is calling before element is loaded.
Try
$(document).ready(function()
{
document.getElementById("passage").innerHTML = "Paragraph changed!";
});
JS:
(function(){
document.getElementById("passage").innerHTML = "Paragraph changed!";
})
I have a problem that some link we show is separeted from the rest of the page itself, so the link showes up immediatly as you open the page but the page takes 2-3 seconds to load, I'm trying to delay the link (in this example it's google) so it will show up a few seconds after the page is loaded.
am I getting close?
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show(), 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com;
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<style>
#Link{display:none;}
</style>
<body window.onLoad="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</div>
</body>
</html>
You have a few errors in your page which is stopping this from working:
Usually the first thing to check when something is not working is the browser console (press F12) and looks for errors. This won't fix problems with logic but should put you in a good position to start debugging things.
You have a missing " syntax error in exportSrc - this will show in the browser console
The load attribute in the body is incorrect. You should just use onload="myFunction()"
Your setTimeout is calling show instead of referencing it. Remove the ()s.
Put the <style> tags inside the <head>
You have an extra </div> tag
This should work better:
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<style>
#Link{display:none;}
</style>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show, 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com";
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<body onload="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</body>
</html>
Try
<body onLoad="myFunction();">
Instead of window.onLoad
I'm creating a website at present.
There many sites/sources I have and could go to for doing what I want. But their ways/steps aren't working for me.
I have the following situation:
I have 2 cols in Dreamweaver.
1 for images and the right col for text.
I want the user to click on the image and hear the audio of the person in the picture.
No players or other pages opening. Click image and hear audio that's it.
Can this be done. As the current and only example seems to leave me uncertain:
http://www.it-student.org.uk/playsound/playsounds.php
I set it up as it asks nothing happens no sound.
<title>Untitled Document</title>
<script>
function EvalSound(soundobj) {
var thissound= eval("document."+soundobj);
thissound.Play();
}
</script>
</head>
<body>
<embed src="hannbil smith.mp3" autostart=false width=0 height=0 name="sound1" enablejavascript="true">
<img src="han cast.jpg"">
</body>
</html>
This can be done easily using jQuery
DEMO jsFiddle
var manifest = [
{id:"waiting", src:"http://stardotserver.co.uk/waiting2.ogg"}
]
var preload = new createjs.LoadQueue()
preload.installPlugin(createjs.Sound)
preload.loadManifest(manifest)
$('img').on('click',function() {
createjs.Sound.play("waiting", createjs.Sound.INTERRUPT_NONE, 0, 0, -1, .5)
});
You AT LEAST need to close the embed tag and remove spaces from the URL.
Also EVAL is EVIL. Lastly return false from the onclick
I gave it an ID and use getElementById
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<script>
function evalSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.Play();
return false;
}
</script>
</head>
<body>
<embed src="hannbil%20smith.mp3" autostart=false width=0 height=0 name="sound1" id="sound1" enablejavascript="true" />
<img src="han%20cast.jpg"">
</body>
</html>