I am trying to implement a button that plays audio. I don't want to have the slider.
Is there anyway to rid of the slider, or maybe use an image of a button instead?
Current code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Music</title>
<style type="text/css">
body {
color:transparent;
}
</style>
</head>
<body onLoad="RandomSong();">
<audio id="content" src="background1.mp3" controls></audio>
<script>
function RandomSong() {
var Music = ["background1.mp3","background2.mp3","background3.mp3","background4.mp3","background5.mp3"];
var randomCode = Math.floor(Math.random()*Music.length);
document.getElementById("content").value = "mp3=" + Music[randomCode] + "&showslider=0&width=5&loop=1&autoplay=0&volume=50";
}
</script>
</body>
</html>
There is a simple JQuery solution to this:
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#track1').click(function(){
$('#wrap').append('<embed id="embed_player" src="audio.wav" autostart="true" hidden="true"></embed>');
});
});
</script>
<img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" />
<div id="wrap"> </div>
Src: Check out this similar post with an answer from #blasteralfred: Play sound file when image is clicked
I'm into making word games for kids, I been playing around with this code for How to make an image that plays audio when cicked. I hope this will help you
I'm using Notepad++ this code works in Google Chome
<!DOCTYPE html>
<html>
<script>
var audio1 = new Audio("/Sound 1/Samples 1Sounds/CAT.wav ");
audio.oncanplaythrough = function(){}
audio.onended = function(){}
</script>
<input type="image" id="myimage"style="height:200px;width:200px;"src="/Picture 1/Samples Pictures/cat.jpg"
onclick="audio1.play()">
<script>
var audio2 = new Audio("/Sound 1/Samples 1Sounds/dog.wav ");
audio.oncanplaythrough = function(){}
audio.onended = function(){}
</script>
<input type="image" id="myimage" style="height:200px;width:200px;"src="/Picture 1/Samples Pictures/dog.jpg"
onclick="audio2.play()">
</html>
Related
I dont have acsesses to the code on ruffle.js and when i try ti use other metheits it says extension blocked but ruffle has worked on this computer and anyone help?
"My" code rn is:
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf8'>
</head>
<body>
<div id='ruffle'></div>
<script>
window.RufflePlayer = window.RufflePlayer || {};
window.addEventListener("DOMContentLoaded", () => {
let ruffle = window.RufflePlayer.newest();
let player = ruffle.createPlayer();
let container = document.getElementById("container");
container.appendChild(player);
player.load("movie.swf");
});
</script>
<script src="https://flash-games.penguinbotcoder.repl.co/ruffle/ruffle.js"></script>
<object width="600" height="400">
<param name="movie" value="https://flash-games.penguinbotcoder.repl.co/flashgames/thinice.swf">
<embed src="https://flash-games.penguinbotcoder.repl.co/flashgames/thinice.swf">
</embed>
</object>
<script src="path/to/ruffle/ruffle.js"></script>
</body>
<div class=ruffle>
</div>
<p>This is a test page for flash content</p>
</html>
as i sayed up there its just not working :(
I don't understand well what is exactly the problem but this is what I noticed from you code:
You are trying to get an element by id container but you don't have that element in your HTML, I think you try to use the element with id ruffle instead.
window.addEventListener("DOMContentLoaded", () => {
let ruffle = window.RufflePlayer.newest();
let player = ruffle.createPlayer();
let container = document.getElementById("ruffle");
container.appendChild(player);
player.load("movie.swf");
});
Update:
If still not working then try this example code and see if it loads the Flash content...
<!DOCTYPE HTML>
<html>
<head> <meta charset='utf8'> </head>
<body>
<script src="https://flash-games.penguinbotcoder.repl.co/ruffle/ruffle.js"></script>
<div id='ruffle'></div>
<p>This is a test page for Adobe Flash content</p>
</body>
<script>
window.RufflePlayer = window.RufflePlayer || {};
window.addEventListener("DOMContentLoaded", start_Ruffle, false );
function start_Ruffle()
{
let ruffle = window.RufflePlayer.newest();
let player = ruffle.createPlayer();
let container = document.getElementById("ruffle");
container.appendChild(player);
player.load("https://flash-games.penguinbotcoder.repl.co/flashgames/thinice.swf");
}
</script>
</html>
This is my code so if you can help me it'd be great thank's StackOverflow
<head>
<script>
function play(){
var audio = document.getElementById("audio");
audio.play();
}
</script>
</head>
<body>
<img src="SoundWave.gif" width="200" height="200" value="play" onclick="play();">
<audio id="audio" src="01.mp3"></audio>
</body>
The code you need will be something like this:
<head>
<script>
function play(){
var myAudio = document.getElementById("audio");
if(myAudio.paused)
myAudio.play();
else
myAudio.pause();
}
</script>
</head>
<body>
<img src="SoundWave.gif" width="200" height="200" onclick="play();">
<audio id="audio" src="01.mp3"></audio>
</body>
you can get more information about html5 audio element and how to work with it using this link
P.S. <img> tag does not have a value property
It's like
<img src="somesrc" file="filepath" />
The src is not the correct url, how can I load the img using the url in file attribute for all images?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>
<body>
<img src="wrongsrc" file="http://www.hi-pda.com/forum/uc_server/data/avatar/000/52/56/39_avatar_middle.jpg"></img>
<script >
$("img").each(function(){
var filepath = $(this).prop("file");
if (filepath) this.src=filepath;
});
</script>
</body>
</html>
I change my code to this, but it does not work.
Using jQuery to edit all of your images:
$(function() {
$("img").each(function(){
var filepath = $(this).attr("file");
if (filepath) this.src=filepath;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="wrongsrc" file="http://www.hi-pda.com/forum/uc_server/data/avatar/000/52/56/39_avatar_middle.jpg"></img>
<img src="wrongsrc" file="http://www.hi-pda.com/forum/uc_server/data/avatar/000/52/56/39_avatar_middle.jpg"></img>
<img src="wrongsrc" file="http://www.hi-pda.com/forum/uc_server/data/avatar/000/52/56/39_avatar_middle.jpg"></img>
<img src="wrongsrc" file="http://www.hi-pda.com/forum/uc_server/data/avatar/000/52/56/39_avatar_middle.jpg"></img>
Add an id to each image
For HTML
<img SRC="somesource" id="1" />
<img SRC="somesource" id="2" />
<img SRC="somesource" id="3" />
For JavaScript
(document).ready(function (){
$("img").each(function() {
var id = $(this).attr('id')
$(this).attr('src', ''+id+'_image.png');
});
});
Rename your images like 1_image.PNG, 2_image.PNG and so on
It sounds confusing but may work, inform if it works, on a mobile device so can't test it myself.
The above answer is right, it goes will when I run it in chrome in a PC.But when I put that code in ios, it seems there is a little problem about using jQuery in ios.Maybe I did not using jQuery in the right way.I solved my problem using the method below:
<script type="text/javascript">
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
if(imgs[i].getAttribute("file")!=null&&imgs[i].getAttribute("file")!=undefined){
imgs[i].src=imgs[i].getAttribute("file");
}
}
</script>
Please use another version of jQuery and it will work fine.
jQuery("img").each(function(){
var filepath = jQuery(this).attr("file");
if (filepath) this.src=filepath;
});
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<img src="wrongsrc" file="http://www.hi-pda.com/forum/uc_server/data/avatar/000/52/56/39_avatar_middle.jpg">
.load() only works on files coming from a server, so it will work later as I'm going to put this on a server
Edit: This code works on firefox but not on chrome
I've been trying to use ajax to load a webpage after selecting an option but the script doesn't even seem to load
here's the script + html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="DaVinciRace.css" />
<title> Da Vinci Race 2014-2015 </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
</head>
<body style="background:#f2f2f2;">
<div id="logo">
<img src="Resources\DVRLogo.png"/>
<!-- <p class="text">Da Vinci Race</p> -->
</div>
<div id="options" style="background:#0c0c0c; float:right;">
<div class="menu">
<div class="chronometre" ></div>
</div>
</div>
<div id="DVRChrono">
</div>
<script>
$(document).ready(function(){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
});
</script>
</body>
</html>
the document "Chronometre.html" is in the same folder as this html page
I feel like I'm missing something obvious but can't for the life of me figure out what it is
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script>
(function($){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
})(jQuery)
</script>
This isn't adding a click handler:
$("#options").on("click", ".chronometre", function() {
// code
});
Because it executes before the #options element exists on the page. The code is executing without error, the jQuery selector simply isn't finding anything. So there are no elements to which a handler can be attached.
You can fix this either by moving the code to the end of the page or by wrapping it in the document.ready handler:
$(function() {
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
});
});
Additionally, your script tags are broken. Each tag should have either a src or content, but not both. Separate them:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
// your code
</script>
I'm trying the HTML5 video tag as in this example, but not everything is working.
I want to use the ontimeupdate event to print current video time:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<video src="test.ogv" width='640' height='480' controls='controls'>
</video>
<div id=time>time</div>
<script>
var video = document.getElementsByTagName('video')[0];
var time = document.getElementById('time');
video.ontimeupdate = function(e) {
time.innerHTML="Current time: " + video.currentTime;
}
</script>
</body>
</html>
This works in Opera and Firefox, but not in Google Chrome.
So, why does this code not working in Chrome?
This works for me, maybe chrome's bug/fault your code doesn't work
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<video src="test.mp4" width='640' height='480' controls='controls' ontimeupdate="timeupdate();">
</video>
<div id=time>time</div>
<script>
var video = document.getElementsByTagName('video')[0];
var time = document.getElementById('time');
function timeupdate() {
time.innerHTML = 'Current time: ' + video.currentTime;
}
</script>
</body>
</html>