At the moment I have an image linked to a page with an onClick event to play a sound when clicked.
<div style="display:none;">
<audio id="audio1" src="SOUND.wav" controls preload="auto" autobuffer></audio>
</div>
<script> function EvalSound(soundobj)
{ var thissound=document.getElementById(soundobj); thissound.play(); }
</script>
<img src="IMAGE.png">
This works fine as is, but the sound is cut off by the page load. Assuming the "SOUND.wav" is 10 seconds long, how would I edit my code so that when the image is clicked, there is a 10 second pause while the sound plays, THEN it loads the page?
Thank you or your help.
You can change your code as follows:
<div style="display:none;">
<audio id="audio1" src="SOUND.wav" controls preload="auto" autobuffer></audio>
</div>
<script> function EvalSound(soundobj)
{ var thissound=document.getElementById(soundobj); thissound.play();
setTimeout( function() { window.location.href = 'PAGE.php'; }, 1000); } // change 1000 to whatever value you would want to wait in milliseconds.
</script>
<a href="#" onClick="EvalSound('audio1')"><img src="IMAGE.png"></a
>
Same as the answer before me, only I suggest you use the audio api to determine the duration of the sound and set it as the timeout.
Also, to change the url you could add it as an argument.
function EvalSoundAndRedirect(soundobj, url) {
var thissound = document.getElementById(soundobj);
thissound.play();
setTimeout(function() {
window.location.href = url;
}, thissound.duration);
}
Using:
<img src="IMAGE.png" />
Related
This is my JavaScript file and I want to use this to mute something in my html file on the press of a button
//checks if its muted or not
var muteCheck = 1;
//function to mute and unmute
function mute() {
muteCheck = muteCheck + 1;
if (muteCheck % 2 === 0) {
document.getElementById("music").muted = true;
} else if (muteCheck % 2 === 1) {
document.getElementById("music").muted = false;
}
}
This is what my html file looks like
<body>
<audio autoplay loop>
<source src="audio/something.mp3" id="music">
</audio>
<button type="button" id="muteButton" onclick="mute()">mute</button>
<script src="variablesAndFunctions.js" type="text/javascript">
mute()
</script>
</body>
I opened it in Chrome, nothing happens when I press the button, nothing prints in the console or anything. I am new to coding so I don't know what I did wrong.
Any help would be appreciated thanks :D
You are setting muted on the <source>, not <audio>. The question has been edited but I believe this is the only remaining error.
You are toggling the muted property of the <source> element, but this is meaningless.
The property applies to the <audio> element.
document.getElementById("music").parentNode.muted
That change would help
<audio autoplay="autoplay" loop="loop" id="music" >
<source src="audio/something.mp3" >
</audio>
Insert this, it comes with the mute control you are look for no js required
I'm trying to randomize some videos that are both .webm and .mp4.
I have a two of each video for instance vid1.webm and vid1.mp4
I'd like to have the videos randomize and pull both at the same time into the video tag.
safari doesn't support .webm so that's why i would like to have .mp4 as a backup and need both to randomize into the browser on click.
I am loading them from an array and also can't figure out how the folder structure should be listed out, I would really like to keep them in an array as I am loading in several hundred
var randomImage = new Array();
randomVideo[0] = "videos/1.webm/ or mp4"; //not sure how to do the file structure
randomVideo[1] = "videos/2.webm/ or mp4"; //
randomVideo[2] = "videos/3.webm/ or mp4"; //
//trying to figure out this part
$(function() {
$('a.click').click(function(e) {
e.preventDefault();
var number = Math.floor(Math.random()*randomVideo.length);
$(this).html('<source src="'+randomVideo[number]+'" />');
});
});
$(function() {
$('a.click').click(function(e) {
e.preventDefault();
var number = Math.floor(Math.random()*randomVideo.length);
$(this).html('<source src="'+randomVideo[number]+'" type="video/mp4" /> )
}
})
html
<a href="#" class="click">
<section>
<video controls autoplay>
<script>
randomVideo()
</script>
</video>
</section>
</a>
If anyone can help me figure this out it would be greatly appreciated!
Can't figure it out, still learning.
You have multiple issues. Firstly your array name doesn't match (randomImage and randomVideo). Not sure why you are hooking the click event twice. One approach is to store the common parts of the path in the array and then concatenate the file ending. Also, I have no idea what you were trying to do with the img tag...
Anyway, the code below should help you, if I have understood what you are trying to do correctly.
var randomVideo = new Array();
// define your common video paths here
randomVideo[0] = "videos/1";
randomVideo[1] = "videos/2";
randomVideo[2] = "videos/3";
function randomiseVideos() {
var number = Math.floor(Math.random() * randomVideo.length);
$('#myvid').empty(); // clean up from last time
// now add 2 sources (will fall back appropriately depending on client support)
$('#myvid').append('<source src="' + randomVideo[number] + '.webm" type="video/webm">');
$('#myvid').append('<source src="' + randomVideo[number] + '.mp4" type="video/mp4">');
}
$(function () {
// Randomise on page load
randomiseVideos();
// handle click on test link
$('a.click').click(function (e) {
e.preventDefault();
randomiseVideos();
});
});
HTML:
Test Link
<section>
<video id="myvid" width="320" height="240" controls autoplay></video>
</section>
JS fiddle demo
The video element supports multiple sources https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
A very simple solution would be to store a list of video objects in your array:
var videos = [
[{type:'mpg', 'src':'blah.mpg'}, {type:'webm', 'src':'blah.webm'}],
[{type:'mpg', 'src':'blah2.mpg'}, {type:'webm', 'src':'blah2.webm'}],
];
...
var video = videos[randomIndex];
And use that to output sources like:
<video controls>
<source src="blah.mpg" type="video/ogg">
<source src="blah.webm" type="video/mp4">
Your browser does not support the <code>video</code> element.
</video>
I have been scratching my head for a few days now with this one. Just trying to get better at javascript but no one seems to be able to figure out what I am doing wrong here.
What I want is to create a data structure or array containing videos
On page load I would like a random video to be loaded and begin playing
After this I would like the user to be able to click the video to initiate the math.random and generate a new video in its place.
Issues -
1 - With the code I have whenever I click to randomize the video just disappears no console errors or anything.
2 - The page doesn't randomize on load
3 - I am not sure if this is the best way to go about as far as data structure is concerned?
This doesn't seem logically like a hard problem to solve but for me its been a real head scratcher.
Any help is greatly appreciated!!
HTML
<a href="#" class="click">
<section>
<div>
<video loop autoplay>
<source src="videos/1.webm" type="video/ogg">
<source src="videos/1.mp4" type="video/mp4">
Your browser does not support the <code>video</code> element.
</video>
</div>
</section>
</a>
JavaScript
//Array of Videos
var videos = [
[{type:'mp4', 'src':'videos/1.mp4'}, {type:'webm', 'src':'videos/1.webm'}],
[{type:'mp4', 'src':'videos/2.mp4'}, {type:'webm', 'src':'videos/2.webm'}],
];
//onClick + Action
$(function() {
$('a.click').click(function(e) {
e.preventDefault();
var randomIndex = parseInt(Math.random()*videos.length);
$(this).find('videos').append('<source src="'+videos[randomIndex]+'" />');
});
});
//onLoad Randomize
function getRandomVideo() {
var number = Math.floor(Math.random()*video.length);
document.write('<source src="'+videos[number]+'" />');
}
$(function() {
$('a.click').click(function(e) {
e.preventDefault();
console.log("hello world");
var number = Math.floor(Math.random()*videos.length);
$(this).html('<source src="'+videos[number]+'" />');
});
});
Here is working pen http://codepen.io/easingthemes/pen/PwWRdx
<a> tag will break on some browsers around block elements. You don't need <a>.
You need videos[number][index].src because videos[number] is an object.
Also you need to reload video when you change src
$('video').load();
$('video').play();
HTML
<section>
<div>
<video loop autoplay>
<source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/ogg">
Your browser does not support the <code>video</code> element.
</video>
</div>
</section>
JS
var videos = [
[{type:'mp4', 'src':'http://techslides.com/demos/sample-videos/small.mp4'}, {type:'webm', 'src':'http://techslides.com/demos/sample-videos/small.webm'}],
[{type:'mp4', 'src':'http://html5demos.com/assets/dizzy.mp4'}, {type:'webm', 'src':'http://html5demos.com/assets/dizzy.webm'}],
];
$(function() {
$('section').on('click', 'div', function(e) {
var number = Math.floor(Math.random()*videos.length);
$(this).find('source').each(function(index){
videoSrc = videos[number][index].src;
$(this).attr('src', videoSrc);
$('video').load();
$('video').play();
});
});
});
Ok this is an array of array of objects this is a function to change the 1st and second src and type
function getRandomVideo(videos) {
var number = Math.floor(Math.random()*videos.length);
$('.click video source').eq(0).attr('type',videos[number][0].type).attr('src',videos[number][0].src);
$('.click video source').eq(1).attr('type',videos[number][1].type).attr('src',videos[number][1].src);
$('.click video').load();
$('.click video').play();
}
DEMO use this function in any event you want
Hi this is currently my code to play a song according to which image is selected:
Javascript
function Start (audioFile)
{
var audie = document.getElementById("myAudio");
audie.src = audioFile;
audie.play();
}
function Stop ()
{
var audie = document.getElementById("myAudio");
audie.pause();
}
HTML5
<img src="images/play.png" alt="Play Button width="37" height="30" onclick="Start('EL.mp3')">
How is it that i could show the HTML 5 audio player with all the controls as soon as the button is selected ? I would like to just have one control bar and everytime the playbutton is clicked the bar appears and maybe display the song that is currently playing .
First, i suggest using jquery for writing JavaScript.
HTML
<audio controls id="myAudio" style="display:none">
JavaScript
function Start (audioFile)
{
$("#myAudio").show();
...
}
function Stop ()
{
$("#myAudio").hide();
...
}
I'm having some trouble. I just discovered that you can control vimeo with js, and now I'm trying to create a play button that will start playing a vimeo video.
The problem I'm having is that I have multiple videos on the same page. I took the example/playground file (from here http://player.vimeo.com/playground / https://github.com/vimeo/player-api/tree/master/javascript) and removed the functionality that I don't require, however, I can't understand how I connect the play button with a certain video.
This is what I have so far
HTML:
<iframe id="player_1" src="http://player.vimeo.com/video/7100569?api=1&player_id=player_1" width="540" height="304" frameborder="0"></iframe>
<div class="intro">
<span class="hide">Play 1</span>
</div>
<iframe id="player_2" src="http://player.vimeo.com/video/7100569?api=1&player_id=player_2" width="540" height="304" frameborder="0"></iframe>
<div class="intro">
<span class="hide">Play 2</span>
</div>
JS:
var vimeoPlayers = document.querySelectorAll('iframe'),
player;
for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
player = vimeoPlayers[i];
$f(player).addEvent('ready', ready);
}
function addEvent(element, eventName, callback) {
if (element.addEventListener) {
element.addEventListener(eventName, callback, false);
}
else {
element.attachEvent(eventName, callback, false);
}
}
function ready(player_id) {
// Keep a reference to Froogaloop for this player
var container = document.getElementById(player_id).parentNode.parentNode,
froogaloop = $f(player_id);
function setupSimpleButtons() {
var buttons = container.querySelector('div.intro'),
playBtn = buttons.querySelector('.hide');
// Call play when play button clicked
addEvent(playBtn, 'click', function() {
froogaloop.api('play');
}, false);
}
setupSimpleButtons();
}
})();
If I have code that is unnecessary please help me remove it.
Many thanks.
Your ready() function is called once per vimeo player. You need to change which object is hooked up with the addEvent button. To do this you probably need to put id attributes on the buttons themselves.
I figured out a way to do this much easier, you can see an example here:
http://labs.funkhausdesign.com/examples/vimeo/froogaloop2-api-basics.html