We Keep Coding

Changing dynamic sound src in howler.js has problems

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();
}
});

looping Html video from script in Javascript

I am playing video with using seekStart and seekEnd values and I want to repeat video When Video is ended,I am running below code When video is starting in 10 seconds and pause at 20 seconds video is not running again. How can I do this?
var video = document.getElementById('video');
var source = document.createElement('source');
//set Volume
document.getElementsByTagName('video')[0].volume = volume / 10;
//set src
source.setAttribute('src', fileName);
video.appendChild(source);
//set seekStart
video.addEventListener('loadedmetadata',function(){
this.currentTime = seekStart;
},false);
//set SeekEnd
video.addEventListener('timeupdate',function(){
if(this.currentTime > seekEnd){
this.pause();
}
});
//looping
video.addEventListener('ended', function () {
this.play();
}, false);
video.play();

I'm not sure how you want the seeking functionality to work, but to loop back to the start when a video ends you need to also set the time back to the start:
video.addEventListener('ended', function () {
this.currentTime = 0;
this.play();
}, false);

How to consolidate multiple similar functions into a single one?

I'm stuck on a piece of JavaScript code that applies an event on the Youtube API. The goal is when you click on the appropriate button, the video moves backwards by 5s, 10s or 30s or advances by 5s, 10s or 30s.
My problem is that I have six functions that are alike but do not have the same time values. (in this example I put only two of the functions: rewind5() to back up 5 seconds and rewind10() to back up 10 seconds).
I am looking for a charitable soul that could help me to combine these two functions (rewind5() and rewind10()) into a single function. Once I have the right structure I could create the four other functions using the single function.
My JS file :
// Rewind 5s
function onPlayerReady(event){
if(player.getPlayerState()===1 || player.getPlayerState()===2){
$('#s5back').prop('disabled', false);
$( '#s5back' ).click(function() {
rewind5();
});
} else {
$('#s5back').prop('disabled', true);
}
}
function rewind5() {
var currentTime = player.getCurrentTime();
player.seekTo(currentTime - 5, true);
player.playVideo();
};
// Rewind 10s
function onPlayerReady(event){
if(player.getPlayerState()===1 || player.getPlayerState()===2){
$('#s10back').prop('disabled', false);
$( '#s10back' ).click(function() {
rewind10();
});
} else {
$('#s10back').prop('disabled', true);
}
}
function rewind10(){
var currentTime = player.getCurrentTime();
player.seekTo(currentTime - 10, true);
player.playVideo();
};
My HTML file :
<div id="video-placeholder"></div>
<script type="text/javascript">
var player,
time_update_interval = 0;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video-placeholder', {
width: '100%',
height: '625px',
videoId: 'ID URL YOUTUBE',
playerVars: {
color: 'white',
controls: 0,
rel: 0,
showinfo: 0
},
events: {
onReady: initialize,
onStateChange: onPlayerReady
}
});
}
</script>

Why not have just a single seekBy function, and pass it the desired number of seconds to rewind?
function seekBy(secs){
var currentTime = player.getCurrentTime();
player.seekTo(currentTime + secs, true);
player.playVideo();
}
and implement it with, for example
$('#s10back').click(function() {
seekBy(-10);
});
or 5 seconds, or 30, or 60. To go forward, pass a positive number instead:
$('#s10forward').click(function() {
seekBy(10);
});

How can I check whether user is currently using the audio seekbar?

I have an HTML audio player like this:
<audio id="audioPlayer" controls>
<source src="test.mp3">
</audio>
I want to display some images in sync the audio file, including when the user is moving the seekbar.
However, I can't find a way to check whether user is currently using the audio seekbar.
I have tried to use the timeupdateevent with no success: the code below works only when user seeks back in time.
var audioPlayer = document.getElementById('audioPlayer');
var lastUpdateTime;
audioPlayer.addEventListener('timeupdate', function() {update();});
function update() {
if ( audioPlayer.currentTime - lastUpdateTime < 0 )
console.log("seeking");
lastUpdateTime = audioPlayer.currentTime;
}
I am looking for something working on "recent" browsers (e.g. IE10+).

It's a bit hacky but works:
Version with jQuery:
var $audio = $( '#myAudio' );
var onPause = false;
// Pause event helps us to know is player playing or not
$audio.on( 'pause', function() {
onPause = true;
setTimeout(function() {
onPause = false;
});
});
$audio[0].on( 'timeupdate', function(e) {
// trick to get current pause state
setTimeout(function(){
// checks if player paused and not last timeupdate event call
if ( $audio[0].paused && !onPause ) {
// Fire event then user is changing seek bar
$audio.trigger( 'userSeeking' );
}
});
});
$audio.on( 'userSeeking', function(){
// do some magic
});
Version with pure javascript:
var audio = document.getElementById( 'myAudio' );
var onPause = false;
var seek = false;
// Pause event helps us to know is player playing or not
audio.addEventListener( 'pause', function(e) {
onPause = true;
setTimeout(function() {
onPause = false;
});
});
audio.addEventListener( 'timeupdate', function(e) {
// trick to get current pause state
setTimeout(function(){
seek = false;
// checks if player paused and not last timeupdate event call
if ( $audio[0].paused && !onPause ) {
seek = true;
// Fire event then user is changing seek bar
}
// or you can return current state of seeking here
});
});
And here is working example ( codepen using jQuery version ):
http://codepen.io/GomatoX/pen/ZYpWbN

Video starts when current slide // Superslides

So I solved the individual slide delay problem with superslides using the answers found at Individual slide delay // Superslides, but now I'm having trouble with a video I put in.
The video is Slide 4, but it starts playing when the slider loads. I'm using YTPlayer for the player.
jQuery('#fullscreen , .p-section').superslides({
play: 12000,
animation: 'fade',
inherit_height_from: window,
});
jQuery('#fullscreen').on('animated.slides', function () {
var slideNo = jQuery(this).superslides('current');
if(slideNo === 3){ //slide 4
jQuery(this).superslides('stop');
setTimeout(function(){
jQuery('#fullscreen').superslides('start')
}, 20000);
} });
That is what I have for the slider. How can I get the video to start playing only when the video is the current slide and then transitions to the next slide after it plays.
UPDATE: IN CASE SOMEONE WAS LOOKING FOR THIS AS WELL.
With the help of #Sunand, here's what I have.
jQuery('#fullscreen , .p-section').superslides({
play: 12000,
animation: 'fade',
inherit_height_from: window,
});
jQuery('#fullscreen').on('animated.slides', function () {
var slideNo = jQuery(this).superslides('current');
if(slideNo === 3){ //slide 4
jQuery(this).superslides('stop');
jQuery(".mb_YTVPBar .buttonBar").css({"display":"block"});
jQuery(".home-elements").css({"display":"none"});
jQuery("#bgndVideo").playYTP();
jQuery("#bgndVideo").on("YTPEnd",function(){
jQuery('#fullscreen').superslides('start');
jQuery(".mb_YTVPBar .buttonBar").css({"display":"none"});
jQuery(".home-elements").css({"display":"block"});
});
}
});
Now I'm still working on if they click next before the video is done, then the video should stop. Will update this when I figure it out.

set autoPlay:false in the data-property attribute and change ur code to
jQuery('#fullscreen').on('animated.slides', function () {
var slideNo = jQuery(this).superslides('current');
if(slideNo === 3){ //slide 4
var me = this;
jQuery(this).superslides('stop');
jQuery("#videoID").playYTP();
jQuery("#videoID").one("YTPEnd",function(){
jQuery(me).superslides('start');
});
} });