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>
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>
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 am a beginer to javascript.I want to create a div dynamically,and then i want to set a video tag inside that div.After that write this div inside of the body,the another need is that the all elements inside that body should not be visible.The only visible item must be that video.
Below code is my try.But it shows the p tag element when video play.
Please help me.. Thank you..
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function dyna()
{
var dynaDiv = document.createElement("div");
dynaDiv.style.background = "red";
dynaDiv.style.color = "white";
dynaDiv.innerHTML = "<video autoplay><source type='video/mp4' src='video/BigBuck_converted.mp4'/></video>";
document.body.appendChild(dynaDiv);
}
</script>
</head>
<body onload="dyna();">
<p>demo</p>
</body>
</html>
Got the answer.i just added the bellow code
document.body.innerHTML="";
after
dynaDiv.innerHTML = "<video autoplay><source type='videos/mp4' src='videos/Wildlife.mp4'/></video>";
its worked properly as my need.. thanks alot.. :)
I have a "print" button on index.html. What code do I need to print the print.html file? I mean, when I press the button from index.html, print the page print.html.
function closePrint () {
document.body.removeChild(this.__container__);
}
function setPrint () {
this.contentWindow.__container__ = this;
this.contentWindow.onbeforeunload = closePrint;
this.contentWindow.onafterprint = closePrint;
this.contentWindow.focus(); // Required for IE
this.contentWindow.print();
}
function printPage (sURL) {
var oHiddFrame = document.createElement("iframe");
oHiddFrame.onload = setPrint;
oHiddFrame.style.visibility = "hidden";
oHiddFrame.style.position = "fixed";
oHiddFrame.style.right = "0";
oHiddFrame.style.bottom = "0";
oHiddFrame.src = sURL;
document.body.appendChild(oHiddFrame);
}
Then use
onclick="printPage('print_url');"
I think you're looking for window.print()
Update
Just noticed you've specified file names in there and that you want to print print.html when a button on index.html is clicked. There's no built-in way to do this (in the sense that you can't pass any arguments to window.print() indicating the document to print). What you could do is load the document to print into an iframe or open a new window and on load, invoke window.print() on that container.
Here are some forum posts and web pages that talk about the same thing:
http://www.highdots.com/forums/javascript/printing-another-web-file-present-274201.html
http://www.webmasterworld.com/javascript/3524974.htm
http://www.felgall.com/jstip29.htm
Update 2
Here's some quick-and-dirty code - note that this will only work if both your pages are in the same domain. Additionally, Firefox seems to fire the load event for an empty iframe also - so the print dialog will be displayed immediately on load, even when no src value was set for the iframe.
index.html
<html>
<head>
<title>Index</title>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$('#loaderFrame').load(function(){
var w = (this.contentWindow || this.contentDocument.defaultView);
w.print();
});
$('#printerButton').click(function(){
$('#loaderFrame').attr('src', 'print.html');
});
});
</script>
<style>
#loaderFrame{
visibility: hidden;
height: 1px;
width: 1px;
}
</style>
</head>
<body>
<input type="button" id="printerButton" name="print" value="Print It" />
<iframe id="loaderFrame" ></iframe>
</body>
</html>
print.html
<html>
<head>
<title>To Print</title>
</head>
<body>
Lorem Ipsum - this is print.html
</body>
</html>
Update 3
You might also want to see this: How do I print an IFrame from javascript in Safari/Chrome
You can use the JQuery printPage plugin (https://github.com/posabsolute/jQuery-printPage-plugin). This plugin works fine and you can simply print an external html page.
Example:
<html>
<head>
<title>Index</title>
<script src="http://www.position-absolute.com/creation/print/jquery.min.js" type="text/javascript"></script>
<script src="http://www.position-absolute.com/creation/print/jquery.printPage.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$(".btnPrint").printPage();
});
</script>
</head>
<body>
<input type="button" id="printerButton" name="print" value="Print It" />
<p><a class="btnPrint" href='iframe.html'>Print!</a></p>
</body>
</html>