Changing dynamic sound src in howler.js has problems - javascript

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

Related

videos in swiffyslider doesn't reload

I have this.
window.addEventListener('load', () => {
document.getElementById('myVideo').play();
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
swiffyslider.slide(document.getElementById('mySwiffyslider'), next = true);
setInterval(() => swiffyslider.slide(sliderElement), 4000);
}
let sliderElement = document.getElementById('mySwiffyslider');
const container = sliderElement.querySelector(".slider-container");
const infiniteScrollToFirstWhenOnLast = () => {
if (container.lastElementChild == container.querySelector('.slide-visible')) {
container.scroll({
left: 0,
behavior: "instant"
});
}
};
//Append the first slide as the last
container.appendChild(container.firstElementChild.cloneNode(true));
//Add an additional indicator button to keep counts correct
sliderElement.querySelector(".slider-indicators").appendChild(sliderElement.querySelector(".slider-indicators").lastElementChild.cloneNode(true));
swiffyslider.onSlideEnd(sliderElement, infiniteScrollToFirstWhenOnLast, 90);
});
It plays the video, but when slider gets to the end, video is stopped, at the end, doesn't replay, and slider goes on. I just want the video to play again when slider ends.

Javascript pause sound when image is clicked

I'm using code that plays sound whn image is loaded (i'm using this as a play button on music player). But I have a problem, you can't stop sound when image is clicked (play button). So, do you know how can I make on this code, so sound pause when image is clicked.
My code:
<script type="text/javascript">
//Create new function that will update the image source on click.
function updateImage(el, soundfile) {
//Determine if music is playing or paused then adjust image
source accordingly.
if(soundfile.mp3.paused) {
el.src =
"imageurl.com";
} else {
el.src = "secondimageurl.com";
}
};
function playSound(el,soundfile) {
if (el.mp3) {
if(el.mp3.paused) el.mp3.play();
else el.mp3.pause();
} else {
el.mp3 = new Audio(soundfile);
el.mp3.play();
}
//Call new function made whenever the sound is toggled.
updateImage(document.getElementById("Bottom-1"), el);
};
</script>
<body onload="playSound(this, 'soundsource.mp3');">
<img src="buttonimage.html" name="Bottom-1" width="50" height="45"
border="0" id="Bottom-1"/>
</span>
</body>
Use SoundPlayer.js.
// Initialize
const player = new SoundPlayer();
// Load the sound
const sound = player.load('Sound.mp3');
// Play the sound
sound.play();
// load & play in one line
const sound = player.load('Sound.mp3').play();
And bind the image onclick event
image.onclick = function () {
sound[ sound.isPlaying ? 'pause' : 'play' ]();
image.src = sound.isPlaying ? 'isPlaying.jpg' : 'isPaused.jpg';
}
Full fiddle: https://jsfiddle.net/GustavGenberg/dxgph924/

Vimeo videos do not load

I would like to use integrated Vimeo videos on a page and have them start playing as soon as the page is loaded and when the first video has finished, the second one starts. In my code I have an array of video ids but my problem is the video does not load.
<div id="headervideo"></div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
//====================
document.addEventListener("DOMContentLoaded", function(event) {
var videos = ['240512614', '227735391']; // videos ids
var options = {
width: 640,
loop: true
};
var player = new Vimeo.Player('headervideo', options);
playMovie(player, videos)
})//end function
//====================
var playMovie = function(player, videos) {
if(!videos.length){
return false;
}
var video = videos.shift();
alert (video)
player.loadVideo(videos).then(function(id) {
alert("the video successfully loaded ")
player.getEnded().then(function(ended) {
playMovie(player, videos)
}).catch(function(error) {
console.warn(error)
});
}).catch(function(error) {
console.warn(error);
});
}//end function
//====================
</script>
Your first issue lies in
new Vimeo.Player('headervideo', options);
You cannot create a Vimeo.Player without specifying a video in the options object (or as an html attribute on an associated element).
So, specifying either:
var video = videos.shift();
var options = {
width: 640,
loop: true,
id: video
}
or:
var options = {
width: 640,
loop: true,
id: videos[0]
}
Will let you load the video.
But this will raise your second issue, that playMovie will not wait for your currently playing video to finish, but rather swap the video out immediately. getEnded() is not a synchronously blocking function.
What you want to do is instead listen on the ended event. And also turn of the loop: true as this will disable the ended event
document.addEventListener("DOMContentLoaded", function(event) {
window.videos = ['240512614', '227735391']; // videos ids
var video = videos.shift();
var options = {
width: 640,
loop: false,
id: video
};
window.player = new Vimeo.Player('headervideo', options);
window.player.on('ended', playNext);
window.player.play();
})//end function
//====================
var playNext= function() {
alert('foo');
if(!window.videos.length){
return false;
}
var video = window.videos.shift();
alert (video);
player.loadVideo(video).then(function(id) {
alert("the video "+id+" successfully loaded ");
player.play();
}).catch(function(error) {
console.warn(error)
});
}//end function

How to pause video based on video.currentTime using whole numbers?

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

music play on load page in javascript

I have the following code in javascript that plays a sound
function muzplay() {
var muz = document.getElementById("song");
var button = document.getElementById("play");
if (muz.paused) {
muz.play();
button.textContent = "||";
} else {
muz.pause();
button.textContent = ">";
}
}
but it doesn't starts when the page is loading for the first time.
How can I make the song start when the page is loading?
If I would like to add an image as a button, instead of "button.textContent = "||";" what command can I use. for example I want to use a customize play and pause button instead of the || and > text.
window.onload = function(){ muzplay();}
// or
window.document.onload = function(){ muzplay();}
// or
muzplay();

Categories