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. 🙏
Related
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>
New tab works good, but for some reasons current page haven't redirect (window.location from changeLocation() doesn't work)
function changeLocation() call success everytime when I click button, but location doesn't change.
Basically it seems like window.location doesn't work because of form submit (although I use target="_blank"). But if I add return false after window.location to function, I'm not able to submit form after changing location (because I'm already on another page) and also submit before changing location impossible.
Is this possible to make it works somehow? Thanks.
function changeLocation (){
window.location = "http://bing.com";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>EXAMPLE</title>
</head>
<body>
<form action="https://google.com" target="_blank">
<input type="text">
<button onclick="changeLocation()">Submit</button>
</form>
</body>
</html>
This code works for firefox
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>EXAMPLE</title>
<script type="text/javascript">
function changeLocation (){
window.location = "http://bing.com";
}
</script>
</head>
<body>
<form action="https://google.com" target="_blank">
<input type="text">
<button onclick="changeLocation()">Submit</button>
</form>
</body>
</html>
google.com is being loaded in the new tab and the current tab us being loaded with bing.com
To solve it, you need to add setTimeout to function like this.
function changeLocation (){
setTimeout(function(){
window.location = "http://bing.com";
},200);
}
No ideas why, but it works perfect.
Dim returnUrl = Request.UrlReferrer.ToString()
Response.Write("<script> setTimeout(function(){window.location = """ + returnUrl + """;},200);window.open (""" + loginurl + """,'_blank');</script>")
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>
Just beginning to learn HTML & Javascript.
I have the following code, which works. however, because I have have an img tag in my body it is trying to show a place holder for an image before I click the button. How can I stop this.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tesco JSONP</title>
<script type="text/javascript">
function picture(){
var pic = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg"
document.getElementById('bigpic').src = pic.replace('90x90', '225x225');
}
</script>
</head>
<body>
<img id="bigpic" src="bigpic" />
<button onclick="picture()">Enlarge</button>
</body>
</html>
Best wishes.
Add style "display:none" to picture tag
<img id="bigpic" src="bigpic" style="display:none;"/>
And in function picture change it for show image
document.getElementById('bigpic').style.display='block';
There is demo: http://jsfiddle.net/eX5kx/
Use display property in css, try this:
javascript:
function showPicture() {
var sourceOfPicture = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg";
var img = document.getElementById('bigpic')
img.src = sourceOfPicture.replace('90x90', '225x225');
img.style.display = "block";
}
html:
<img style="display:none;" id="bigpic" src="bigpic" />
<button onclick="showPicture()">Enlarge</button>
I like shin solution, i would do the same thing myself. However theres a lot of way to do that, another option is to put a tiny trasparent image as default and then replace like you did to the other one. like this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tesco JSONP</title>
<script type="text/javascript">
function picture(){
var pic = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg"
document.getElementById('bigpic').src = pic.replace('90x90', '225x225');
}
</script>
</head>
<body>
// tiny trasparent image
<img id="bigpic" src="https://maps.gstatic.com/mapfiles/markers2/dd-via-transparent.png" alt="" />
<button onclick="picture()">Enlarge</button>
</body>
</html>
this way no css is needed but like i said before i prefer Shin's solution.
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>