My Problem is when i press PAUSE btn & after few seconds again if i press the play button then then timer is starting from the beginning .` The timer should continue from the current pause time,if user clicks play button followed by pause button.
Please help me for this, i am trying to solve this issue since last 2 days. But still its not solved as per my app requirement.
function myApp() {
this.paused = false;
this.paused = true // set pause to true (stop)
this.isactive = false; // countdown is active
return this.observer(); // call and return the "observer" method of the "myApp" class
}
myApp.prototype.observer = function() { // observer method
var self = this; // set this to self (this is the current instance of this class)
$('#btn_start').on('click', function(event){ // where an user click on "btn_start"
event.preventDefault();
self.play('mp3'); // call the play method and store the state in a public var
self.countdown(30, self.onEnd); // 30 is the audio duration - second parameter is the callback when the audio is finished
self.isactive = true;
});
return this; // return this instance
};
myApp.prototype.play = function() { // play method
var song = document.getElementById('audiosource');
if (this.paused === true)
{
console.log('play song');
song.play();
this.paused = false;
}
else
{
console.log('pause song');
song.pause();
this.paused = true;
}
return this;
};
myApp.prototype.countdown = function(duration, callback) { // countdown method
var self = this, // class instance
countdown = null, // countdown
ctx = null; // setIntervall clearer
timer = duration; // timer
if (this.isactive === true) // if this method yet called
{
return false;
}
countdown = function() {
console.log('start countdown:' + self.paused);
if (timer === 0)
{
clearInterval(ctx);
callback.call(this);
return false;
}
if (self.paused === false) // if not in pause
{
timer -= 1;
console.log(timer);
$('#timer > span').html(timer);
}
};
ctx = setInterval(countdown, 1000);
};
myApp.prototype.onEnd = function() {
// when the audio is finish..
alert ('end of the song');
};
; $(function() {
new myApp();
});
I would structure your app differently
<div id="app">
<div id="timer">click play</div>
PLAY
</div>
<audio id="audiosource">
<source src="http://www.virtuagym.com/audio/en/get_ready.mp3" type="audio/mpeg" />
<source src="http://www.soundjay.com/button/button-1.wav" type="audio/wav" />
</audio>
<audio id="a_1" >
<source src="http://www.virtuagym.com/audio/en/1.ogg" type="audio/ogg" />
<source src="http://www.virtuagym.com/audio/en/1.mp3" type="audio/mp3" />
</audio>
<audio id="a_2" >
<source src="http://www.virtuagym.com/audio/audio/en/2.ogg" type="audio/ogg" />
<source src="http://www.virtuagym.com/audio/audio/en/2.mp3" type="audio/mp3" />
</audio>
<audio id="a_3" >
<source src="http://www.virtuagym.com/audio/audio/en/3.ogg" type="audio/ogg" />
<source src="http://www.virtuagym.com/audio/audio/en/3.mp3" type="audio/mp3" />
</audio>
<audio id="a_4" >
<source src="http://www.virtuagym.com/audio/audio/en/4.ogg" type="audio/ogg" />
<source src="http://www.virtuagym.com/audio/audio/en/4.mp3" type="audio/mp3" />
</audio>
<audio id="a_5" >
<source src="http://www.virtuagym.com/audio/audio/en/5.ogg" type="audio/ogg" />
<source src="http://www.virtuagym.com/audio/en/5.mp3" type="audio/mp3" />
</audio>
JS:
(function ($) {
// function to play sounds, calls `done` when sounds are finished to play
// here you should adjust timings for your audio
var playGetReady = function (done) {
var ids = ['audiosource', 'a_5', 'a_4', 'a_3', 'a_2', 'a_1'],
playNext = function () {
var id = ids.shift();
document.getElementById(id).play();
if (ids.length) {
setTimeout(playNext, 1000);
} else {
done();
}
};
playNext();
};
// constructor
function App($el, startFrom) {
this.$el = $el; // root element
this.$timer = this.$('#timer'); // find element to render countdown to
this.$button = this.$('#btn_start'); // play/pause button
// $.proxy(fn, ctx); makes `ctx` to be referenced by `this` inside `fn`
// sets handler on button
this.$button.click($.proxy(this.buttonHandler, this));
// sets value to start countdown
this.set(startFrom);
// we're not running yet
this.intervalHandle = null;
};
// look for elements inside of root element
App.prototype.$ = function () {
return this.$el.find.apply(this.$el, arguments);
};
// called on play/pause button click
App.prototype.buttonHandler = function (e) {
e.preventDefault(); // prevent anchor default action
this.toggle(); // toggle play/pause
};
App.prototype.start = function () {
var self = this;
playGetReady(function () { // play get ready sound
// start countdown
self.intervalHandle = setInterval($.proxy(self.tick, self), 1000);
// change button text to PAUSE
self.$button.text('PAUSE');
});
};
App.prototype.stop = function () {
// stop countdown
clearInterval(this.intervalHandle);
// set `intervalHandle` to null to be able to check whether
// countdown is running or not
this.intervalHandle = null;
// change button text to PLAY
this.$button.text('PLAY');
};
App.prototype.toggle = function () {
// if running
if (this.intervalHandle) {
// then stop
this.stop();
// if not
} else {
// then start
this.start();
}
};
// sets new value for countdown
App.prototype.set = function (timeLeft) {
this.counter = timeLeft;
};
// called every second to update counter, rerender, call `end` callback
// and play sound
App.prototype.tick = function () {
// update countdown
this.counter -= 1;
// push new countdown to page
this.render();
if (this.counter === 0) { // if countdown is finished
this.stop(); // stop decreasing it
this.end(); // end callback, ask for new value or terminate
}
};
// pushed countdown to page
App.prototype.render = function () {
this.$timer.text(this.counter);
};
// on end callback
App.prototype.end = function () {
// ask for new countdown
var text = prompt('end of the first exercise, NOw lets play the second exercise for your with another by loading its time');
if (text) { // if user entered any
var next = Number(text); // convert it to number
this.set(next); // set new countdown value
this.render(); // push changes to page
this.start(); // start countdown
} else { // if user entered nothing
// do nothing
this.$timer.text('You\'re done'); // tell user he finished
}
};
$(function () {
var app = new App($('#app'), 5); // create app
});
})(jQuery);
Note, you should adjust timings in playGetReady according to your sounds. Also, only a_5 and a_1 are loading.
Hope it'll help. I'd also recommend you reading tutorial or book on JavaScript.
jsFiddle
You must store the timeleft somewhere and when you press play again, you resume from timeleft.
I just added the timeleft var.
function myApp() {
this.timeleft = 30;
this.paused = false;
this.paused = true; // set pause to true (stop)
this.isactive = false; // countdown is active
return this.observer(); // call and return the "observer" method of the "myApp" class
}
myApp.prototype.observer = function() { // observer method
var self = this; // set this to self (this is the current instance of this class)
$('#btn_start').on('click', function(event){ // where an user click on "btn_start"
event.preventDefault();
self.play('mp3'); // call the play method and store the state in a public var
self.countdown( self.timeleft, self.onEnd); // 30 is the audio duration - second parameter is the callback when the audio is finished
self.isactive = true;
});
return this; // return this instance
};
myApp.prototype.play = function() { // play method
var song = document.getElementById('audiosource');
if (this.paused === true)
{
console.log('play song');
song.play();
this.paused = false;
}
else
{
console.log('pause song');
song.pause();
this.paused = true;
}
return this;
};
myApp.prototype.countdown = function(duration, callback) { // countdown method
var self = this, // class instance
countdown = null, // countdown
ctx = null; // setIntervall clearer
timer = duration; // timer
if (this.isactive === true) // if this method yet called
{
return false;
}
countdown = function() {
console.log('start countdown:' + self.paused);
if (timer === 0)
{
clearInterval(ctx);
callback.call(this);
return false;
}
if (self.paused === false) // if not in pause
{
timer -= 1;
console.log(timer);
self.timeleft = timer;
$('#timer > span').html(timer);
}
};
ctx = setInterval(countdown, 1000);
};
myApp.prototype.onEnd = function() {
// when the audio is finish..
alert ('end of the song');
};
;$(function() {
new myApp();
});
Related
I would like to play through Vimeo videos in sequence with JavaScript with continuous playback and looping through items. The following code moves to the second video at the end of the first but the same functions are not called at the end of the second video. Only the end of the first video shows Called! in the Javascript console, not the end of the second.
The Vimeo Player SDK has player.getVideoId() but not player.setVideoId() so I used a hack to load the next video: setting the source of the iframe and starting the Vimeo player anew. I wonder if this is the problem and the listener for the end of the video is attached to the discarded player.
Another issue with this code is that it exits fullscreen to load the next video.
I attempted this CodePen that sets the Vimeo Player on any element instead of an iframe and was unable to change the played video.
What is a cleaner or effective way of changing videos with the Vimeo Player SDK?
The HTML is:
<div class="vimeo">
<div class="resp-iframe-container container-centered">
<iframe class="resp-iframe" scrolling="no" frameborder="no" src="https://player.vimeo.com/video/238301525" allowfullscreen="" data-ready="true"></iframe></div></div>
And the javascript is:
var l = ["238301525", "496371201", "238301525", "496371201", "..."];
window.current = 0;
var increment = function() {
window.current += 1;
if (window.current == l.length) {
window.current = 0;
}
};
var decrement = function() {
window.current -= 1;
if (window.current < 0) {
window.current = l.length - 1;
}
};
prevA.addEventListener("click", function() {
decrement();
loadPlayer();
});
nextA.addEventListener("click", function() {
increment();
console.log("here!");
loadPlayer();
console.log("there!");
});
var loadPlayer = function() {
console.log("Called!");
var iframe = document.querySelector('iframe');
iframe.src = "https://player.vimeo.com/video/" + l[window.current];
var player = new Vimeo.Player(iframe);
player.autoplay = true;
var treatEvent = function(data, eventLabel) {
// Custom code...
if ("end" == eventLabel) {
console.log("incrementing automatically");
increment();
loadPlayer();
}
};
var onPlay = function(data) {
treatEvent(data, "play");
}
var onPause = function(data) {
treatEvent(data, "pause");
}
var onSeeked = function(data) {
treatEvent(data, "seeked");
}
var onEnd = function(data) {
treatEvent(data, "end");
}
player.on('play', onPlay);
player.on('pause', onPause);
player.on('seeked', onSeeked);
player.on('ended', onEnd);
setTimeout(function() {
//console.log("Trying to play...");
player.play().then(function() {
// the video was played
console.log("success: video played");
}).catch(function(error) {
console.log("Error! " + error.name);
});
}, 1000);
}
loadPlayer();
It seems that the Vimeo Player keeps track of whether it was initialized, adding a tag data-vimeo-initialized="true" in the HTML element.
One solution is to use the Vimeo Player SDK function .loadVideo():
var song_iframe = document.querySelector("iframe#song_video");
var song_player = new Vimeo.Player(song_iframe);
var on_song_end = function(data) {
// Logic to get the new id.
song_player.loadVideo(newId).then(function() {
song_player.play();
});
};
song_player.on("ended", on_song_end);
i am currently practicing my html and js skills and i have this code which is when i click the unlock button the audio will automatically play but the problem is even the unlock code is wrong the audio will still play this is my html on the button and on the audio
the audio tag:
<audio id="music" src="bgmusic.mp3" controls hidden loop></audio>
the button tag:
<button id="unlock" class="round pink" onclick="playAudio()">
Unlock
</button>
and here's my current js for the onlick event on the button
var x =
document.getElementById("music");
function playAudio() {
x.play();
}
that is my current syntax but what i want to happen is when the audio will only play if i enter the correct code
and here's the js function for the unlock code functionality:
var number = 0;
$('#unlock').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$('#textMachine').css('display', 'inline-block');
var code = '';
$.each($('.code'), function(i, v) {
code += $(v).val();
});
if(code == '30')
{
// success
var machine = $('#textMachine').slotMachine({
active: 0,
delay: 500,
randomize : function(activeElementIndex){
return 3;
}
});
machine.setRandomize(3);
machine.shuffle(5, function(){
answerCorrect();
});
} else {
if(number == 3) { number = 0; }
// fail
var machine = $('#textMachine').slotMachine({
active: 1,
delay: 500,
randomize : function(activeElementIndex){
return number;
}
});
machine.shuffle(5, function(){
number++;
});
}
});
var answerCorrect = function() {
$('.login-form').fadeOut();
$('.congratulation-text').fadeIn();
$('.success-area').css('display','block');
};
})();
well actually you can do this
function playSound () {
var audio = new Audio('audio_file.mp3');
audio.play();
}
and you can call it on your button or your function
I am trying to get a slider to stop auto sliding as soon as the user clicks on the next arrow. The slider should stop and come to a full pause as the user clicks on the next slider.
I put all of the slider code into a function called dontRun. I initially set it to dontRun(1) so that it meets the conditional and the slider functions upon loading the page. Once the user clicks on the next arrow, I have it go to the function dontRun(0) which should set the autoplay to a slow amount so that it no longer autoslides.
The problem is that while dontRun(0) is working, it is not accessing the autoplay feature, nor is it stopping the slider.
How can this be fixed?
function dontRun(value){
if(value === 1) {
var wallopEl = document.querySelector('.Wallop');
var wallop = new Wallop(wallopEl);
// To start Autoplay, just call the function below
// and pass in the number of seconds as interval
// if you want to start autoplay after a while
// you can wrap this in a setTimeout(); function
autoplay(5000);
// This a a helper function to build a simple
// auto-play functionality.
function autoplay(interval) {
var lastTime = 0;
function frame(timestamp) {
var update = timestamp - lastTime >= interval;
if (update) {
wallop.next();
lastTime = timestamp;
}
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
};
}//if
else if (value === 0){
alert("This slider should not be auto updating anymore.");
autoplay(50000000000);
}
}// end of function
dontRun(1);
$(".Next").click(function(){
dontRun(0);
})
Your autoplay function cannot be called due to its accessibility. You need take out the function and add before dontRun method.
function autoplay(interval) {
console.log('called');
};
function dontRun(value){
autoplay(5000);
// logic
}
function autoplay(interval) {
console.log('called');
var lastTime = 0;
function frame(timestamp) {
var update = timestamp - lastTime >= interval;
if (update) {
wallop.next();
lastTime = timestamp;
}
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
};
function dontRun(value) {
if (value === 1) {
var wallopEl = document.querySelector('.Wallop');
var wallop = new Wallop(wallopEl);
// To start Autoplay, just call the function below
// and pass in the number of seconds as interval
// if you want to start autoplay after a while
// you can wrap this in a setTimeout(); function
autoplay(5000);
// This a a helper function to build a simple
// auto-play functionality.
} //if
else if (value === 0) {
alert("This slider should not be auto updating anymore.");
autoplay(50000000000);
}
} // end of function
//dontRun(0);
function clickMe() {
console.log('clicked');
dontRun(0);
}
#btntag {
width: 100px;
height: 50px;
}
<button onclick="clickMe()" id="btntag">click</button>
I'm trying to figure out a way to get my video to start playing only once it becomes in focus of the viewport. The video will be in a bunch of text of an article and I would like it to only play when the user scrolls down to it
<script>
window.onload = function() {
// Video
var video = document.getElementById("video");
// Buttons
var playButton = document.getElementById("play-pause");
var playButtonImg = document.getElementById("playButtonImg");
var muteButton = document.getElementById("mute");
var muteButtonImg = document.getElementById("muteButtonImg");
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
playButtonImg.src = "pause-sm.png";
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
playButtonImg.src = "play-sm.png";
}
});
video.addEventListener("ended", function(){
playButtonImg.src = "replay-sm.png";
});
// Event listener for the mute button
muteButton.addEventListener("click", function() {
if (video.muted == false) {
// Mute the video
video.muted = true;
// Update the button text
muteButtonImg.src = "mute-sm.png";
} else {
// Unmute the video
video.muted = false;
// Update the button text
muteButtonImg.src = "volume-sm.png";
}
});
// Pause the video when the seek handle is being dragged
seekBar.addEventListener("mousedown", function() {
video.pause();
});
}
</script>
If you can use jQuery, waypoints is what you seek:
http://imakewebthings.com/waypoints/
I'm working on an online radio website and am trying to detect what state the audio player is currently in for the user.
The current setup I've got is often wrong in knowing this and if I'm on iOS and I pause from the lock screen player instead, it will still think it's playing because I never clicked the html pause button.
Finally how is it possible to detect when my stream has fully ended. I've tried: onstalled="", onwaiting="", onerror="", onended="". But none of them work 100% of the time. The closest one to work would be: onstalled="", but even that only had a 60% success rate or so (occasionally when I'm loading the site it would tell me it has ended).
HTML:
<audio autoplay="" id="player" title="" oncanplay="radioLoaded()">
<source src="...">
</audio>
Javascript:
function radioLoaded() {
if (player.paused) {
document.getElementById('radioplaypause').innerHTML = varRadioResume;
} else if (player.play) {
document.getElementById('radioplaypause').innerHTML = varRadioPause;
} else {
document.getElementById('radioplaypause').innerHTML = varRadioLoading;
}
window.player = document.getElementById('player');
document.getElementById('radioplaypause').onclick = function () {
if (player.paused) {
player.play();
this.innerHTML = varRadioPause;
} else {
player.pause();
this.innerHTML = varRadioResume;
}
}
};
function radioEnded() {
document.getElementById('radiolivetext').innerHTML = 'OFFLINE';
document.getElementById('radioplayer').style.display = 'none';
document.getElementById('radioinformation').style.display = 'none';
};
Try this, with some corrections/notes to the code in general:
function radioLoaded() {
// move this line to the top
window.player = document.getElementById('player'); // !!! <-- name too generic, possibility of global collisions
var playPauseButton = document.getElementById('radioplaypause');
if (player.paused) {
playPauseButton.innerHTML = varRadioResume;
} else if (player.play) {
playPauseButton.innerHTML = varRadioPause;
} else {
playPauseButton.innerHTML = varRadioLoading;
}
playPauseButton.onclick = function () {
if (player.paused) {
player.play();
this.innerHTML = varRadioPause;
} else {
player.pause();
this.innerHTML = varRadioResume;
}
};
player.onended = function () {
console.log('ended');
};
// other helpful events
player.onpause = function () {
console.log('paused...');
}
player.onplay = function () {
console.log('playing...');
}
player.onprogress = function (e) {
console.log(e.loaded + ' of ' + e.total + ' loaded');
}
};