<video id="js-video" autoplay>
<source src="./vid.mp4" type="video/mp4">
</video>
<button id="js-button">
</button>
var video = document.getElementById('js-video');
var button = document.getElementById('js-button');
var data = [
{ pauseTime: 2,
image: "./foo_1.png"
},{
pauseTime: 6,
image: "./foo_2.png"
}
];
function showOverlay() {
video.addEventListener('timeupdate', function() {
var full = parseInt(video.currentTime);
console.log(video.currentTime);
for (var i=0; i < data.length; i++) {
if (full === data[i].pauseTime) {
video.pause();
moveToNextScene();
} else {
console.log("else");
}
}
});
}
function moveToNextScene() {
button.addEventListener('click', function() {
video.play();
});
}
showOverlay();
I have a video and using the data array, I would like to pause the video at the pauseTime in the objects inside the data array and place an overlay image on top of it.
The problem I'm having is that the timeUpdate event returns a decimal number so I have to call parseInt on it but in that case the video keeps pausing at all the intervals between 2 whole numbers, eg: if I want to pause at 2 seconds, it will pause several times between 2.000001 all the way to 2.999999, but I just want it to pause once around 2.000001 (doesn't have to be exact) and no more until the next pauseTime, in this case 6.
I wrote video[0].currentTime += 1; in the if statement and it fixes this problem but then it jumps by one sec and I don't want that.
You can see what I mean here: https://jsfiddle.net/njbn0ddn/1/
I think you need a more formal way of noting completion of the event. Here we note wether we have hit that stopping point, and if we have, we move on without checking the time again. Here is the updated fiddle: https://jsfiddle.net/meqnz2vj/
var video = document.getElementById('js-video');
var button = document.getElementById('js-button');
var data = [
{ pauseTime: 2,
image: "./foo_1.png",
got_here:false
},{
pauseTime: 6,
image: "./foo_2.png",
got_here:false
}
];
function showOverlay() {
video.addEventListener('timeupdate', function() {
var full = parseInt(video.currentTime);
console.log(video.currentTime);
for (var i=0; i < data.length; i++) {
if (full === data[i].pauseTime && data[i].got_here == false) {
data[i].got_here = true;
video.pause();
moveToNextScene();
} else {
console.log("else");
}
}
});
}
//when paused, a button will appear, on closing it, the vide resumes
function moveToNextScene() {
button.addEventListener('click', function() {
video.play();
});
}
showOverlay();
Related
I've added buttons to the page that when you click on each one, it first unloads the howl object and changes the src, and then new music is played. But the problem is that after changing src twice, the script does not work a third time
What does the following code do:
The how object creates howling
When you hit any button that has .play-btn, the source of each button puts in ._src sound and new music is played
<script>
var musicSrc = "";
var sound = 0;
var musicId= 0;
var soundCurrentTime ,soundTime = 0;
var soundPercent = 0;
var playInterval;
sound = new Howl({
src: '/uploads/tracks/'+$('.content > .music-list-player:first-of-type .play-btn').attr('track-file'),
volume: 1,
html5: true,
xhr: {
method: 'POST',
},
format : 'mp3',
onload: function () {
$('.player-container').removeClass('load-track'); //'Remove Music Loading Animation
soundTime = sound.duration(); //'Get Full Sound Time
soundPercent = (soundCurrentTime * 100)/soundTime; //'Get now Percent Played
$('.full-time#full-time').html(secondsToHms(soundTime)); //'Show Full Music Time in left Time Box
},
onplay:function () {
$('.player-container').removeClass('load-track'); //'Remove Music Loading Animation
playInterval= setInterval(playProgress,100);
$('.play-btn[playing="1"]').attr('player-target','pause');
},
onend: function () {
$('.play-btn[playing="1"]').attr('player-target','play'); //'Show Play Button
$('.player-progress-bar').css('width','0%'); //'Reset Progress Bar
$('.current-time').html("00:00"); //Set Current Time to 00:00
clearInterval(playInterval);
},
onpause: function () {
$('.player-container').removeClass('load-track'); //'Remove Music Loading Animation
$('#progress'+musicId+', #progress').css('width',soundPercent+'%');
$('.current-time').html('00:00');
$('.current-time#current-time , #current-time-'+musicId).html(secondsToHms(soundCurrentTime));
clearInterval(playInterval);
},
onloop: function () {
playInterval = setInterval(playProgress,100);
}
});
$('.music-list-player .play-btn').on('click', function () { //'It happens by Click the list play Button
$('.player-container').addClass('load-track');
var playerBtnClass = '.'+this.className;
var playingStatus = $(this).attr('player-target') == 'pause' ? playingStatus = 0 : playingStatus = 1;
musicId = this.id;
musicSrc = $(this).attr('track-file');
if (playingStatus){ //'Play btn is playing
if (sound._src !== '/uploads/tracks/'+musicSrc){ //'Music's changed
sound.stop();
sound.unload();
console.log(sound);
sound._src = '/uploads/tracks/'+musicSrc;
sound.load();
$('.player-progress-bar').css('width','0%'); //'Reset Progress Bar
$('.player-container').addClass('load-track'); //'add Music Loading Animation
}
$('.player-artist-name').html($(playerBtnClass+"#"+musicId+" + .artist-name ").html());
$('.player-music-name').html($(playerBtnClass+"#"+musicId+" + .artist-name + .music-name ").html());
$(this).attr('player-target','pause');
$(playerBtnClass+":not(#"+musicId+")").attr('player-target','play');
$('#play-btn').attr('player-target','pause');
sound.play();
}
else{ //'Play btn is not playing
$(this).attr('player-target','play');
$('#play-btn').attr('player-target','play');
sound.pause();
}
});
I have a set interval and within the set interval I have a sound that needs to be played once and once only but the trouble is the sound keeps looping and doesn't stop does anyone have any idea to what I'm doing wrong here is what I have tried:
html:
<audio id="swoosh">
<source src="/resources/music/swoosh.mp3" type="audio/mpeg">
</audio>
js:
var swoosh = document.getElementById("swoosh");
setInterval(function () {
if ($('.c:contains("01")').length > 0) {
$(".links #abt").attr("href", "about.html");
swoosh.addEventListener('ended', function () {
swoosh.pause();
swoosh.currentTime = 0;
swoosh.loop = false;
}, false);
swoosh.play();
//
if ($('.c:contains("02")').length > 0) {
$(".links #work").attr("href", "work.html");
swoosh.addEventListener('ended', function () {
swoosh.pause();
swoosh.currentTime = 0;
swoosh.loop = false;
}, false);
swoosh.play();
}
}
}, 10);
The aim is to play the sound when the contents of class="c" changes so if the contents is 01 the audio should play once and then pause or stop then when it changes to 02 it should play again and then stop or pause etc etc
Thanks in advance.
I think that you're trying to do that. Store in a variable, the "last sound" reproduced and only plays a new one when it has changed. The listener over "ended" event is unnecessary because you only play once per change.
var swoosh = document.getElementById("swoosh");
var lastPlay = "00";
setInterval(function () {
var cValue = $('.c').text();
if (lastPlay != "01" && cValue.indexOf("01") >= 0) {
$(".links #abt").attr("href", "about.html");
swoosh.play();
lastPlay = "01";
}
else if (lastPlay != "02" && cValue.indexOf("02") >= 0) {
$(".links #work").attr("href", "work.html");
swoosh.play();
lastPlay = "02";
}
}, 10);
Other better way was to add a listener to the change event of the ".c" element, it avoids the "query" every 10ms. But I don't have enough code to show you.
On a slider projet, l've got a small problem.
When the user user click on next button, it stops my autoplay function and indeed, thats what l want. But my autoplay has for instruction the click of next button.
So which condition l have to put for :
if the user pressed the next, stop autoplay, else : continue autoplay.
Maybbe with .trigger('click', param...) in autoplay function ?
Here is a part of the script :
$(function() {
function autoplay() {
timer = setInterval(function() {
$('#next-icon').click();
}, 5000);
};
$('#next-icon').click(function() {
imgIndex++;
if (imgIndex > totalImg.length - 1) imgIndex = 0;
var nextImgSrc = galry.children('.item:eq('+(imgIndex)+')').children('img').attr('src');
slider.fadeOut(function() {
slider.html('');
var newImgName = nextImgSrc.split('.'),
newSrcB4 = newImgName[0]+'-b4.'+newImgName[1];
$('<img src="'+newSrcB4+'" class="hover" alt="">').hide().appendTo('.slider');
$('<img src="'+nextImgSrc+'" alt="">').appendTo('.slider');
$('.slider-icon').children('.txt').text((imgIndex + 1)+' of '+totalImg.length);
slider.fadeIn();
$('#pause-icon').hide(); $('#play-icon').show();
clearInterval(timer);
});
}); });
Many thanks.
I'm trying to accomplish playing a sound effect multiple times; first, it is triggered by the press of the button, and then it plays twice more after, in intervals intended to be two seconds after the last.
My current (relevant) HTML:
<!-- AUDIO -->
<audio id="ring_audio" autostart="false" src="http://www.freesound.org/data/previews/352/352300_2247456-lq.mp3"></audio>
<audio id="ring_audio2" autostart="false" src="http://www.freesound.org/data/previews/352/352300_2247456-lq.mp3"></audio>
<audio id="click_audio" autostart="false" src="http://www.freesound.org/data/previews/192/192273_3509815-lq.mp3"></audio>
<div id="title_screen">
<img src="http://data.whicdn.com/images/66375886/large.gif">
<h1>Untitled.</h1>
<h2>a short adventure game</h2>
<button id="start" type="button" onclick="playClick(); fade_title(); playRing_Delay(); playRing_Stop();">Begin</button>
</div>
And my current javascript:
function playClick() {
var audio = document.getElementById("click_audio");
audio.currentTime = 0.3;
audio.play();
}
function fade_title() {
var titlescreen = document.getElementById("title_screen");
titlescreen.style.display = "none";
}
function playRing_Delay() {
setTimeout(function playRing() {
var audio = document.getElementById("ring_audio");
audio.play();
}, 5000);
setTimeout(function playRing() {
var audio = document.getElementById("ring_audio");
audio.play();
}, 7000);
}
function playRing_Stop() {
setTimeout (function playRing() {
var audio = document.getElementById("ring_audio2");
audio.play();
}, 9000);
}
Originally, I attempted to tackle this through use of a for loop and keep it contained just to one function:
function playRing_Delay() {
setTimeout(function playRing() {
var audio = document.getElementById("ring_audio");
for (i = 0; i < 4; i++) {
if i < 3 { //the first two times
audio.play(); //plays audio as normal
}
else { //the last time it plays
audio.play();
setTimeout(function stopRing() {
audio.pause();
}, 500) //stops audio after half a second
}
}
}, 5000);
}
Which, sadly, did not work, so then I attempted to repeat the first bit three times, simply increasing the number of waiting milliseconds so they'd follow in proper succession; I'm not going to paste it because essentially I just put playRing_Stop()'s contents inside of playRing_Delay()'s.
Additionally, I noticed that when I shifted the final ring's wait period (from 9000ms > 2000ms), it played, followed by the one set to 5000ms (as expected), and the second one (7000ms) didn't.
Could someone provide a solution for this - or at the very least explain to me why it happens?
Note: I purposely left out the early stopping point to the third ring in the other methods after my for loop method failed.
That happens because the #ring_audio file is 3 seconds long, and you are trying to replay it after 2 seconds. So it is still playing when you issue the 2nd play command to it.
You should set its currentTime to 0 if you want to restart it before finishing (or wait the full 3 seconds before re-running play on it)
function playRing_Delay() {
setTimeout(function playRing() {
var audio = document.getElementById("ring_audio");
audio.play();
}, 5000);
setTimeout(function playRing() {
var audio = document.getElementById("ring_audio");
audio.currentTime = 0;
audio.play();
}, 7000);
}
Hi I have a page with multiple small videos which can be played by clicking on the covering image. How can I stop them playing onclick if there is already one playing? My script is as follows
function PlayVideo(aid, vid)
{
var myVideo = document.getElementsByTagName("video");
if (myVideo.paused) {
document.getElementById(vid).style.display = "block";
document.getElementById(vid).play();
document.getElementById(aid).style.display = "none";
document.getElementById(vid).addEventListener('ended', myHandler, false);
function myHandler(e) {
if (!e) {
e = window.event;
}
document.getElementById(vid).style.display = "none";
document.getElementById(vid).load();
document.getElementById(aid).style.display = "block";
}
} else {
alert("this is an alert");
return false;
}
}
Works fine without the if/else statement but any click starts the movie and then several movies are playing at once how do I define the parameters so that IF any video is playing then a new one will not start.
myVideo is a NodeList, you have to check the value of each video.
var allVideos = document.getElementsByTagName("video");
var areAllPaused = true;
for(var i=0; i < allVideos.length; i++) {
if (!allVideos[i].paused) {
areAllPaused = false;
}
}
you could just use a flag to check, ie
var videoIsPlaying = false;
function playVideo () {
if(videoIsPlaying){
//dont play video
}else{
//play video and set to true
videoIsPlaying = true;
}
}
you'd have to set it on pause etc
document.getElementsByTagName() will return an array with all the video elements in it. To check if any of them is playing you need to loop through the array and check whether any video is playing:
var anyPlaying=false;
for(var i=0;i<myVideo.length;i++){
if(!myVideo[i].paused){
anyPlaying=true;
}
}
if(!anyPlaying){
//...
}else{
return false;
}