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

Performing an action after a certain amount of clicks, e.g.showing a picture

I've got a click counter and some functions, how can I define, that after/with the e.g. 10th click a function should be executed? Using HTML, CSS, JavaScript.
Tried to add an if-clause to my click counter function in javascript in HTML, activating a function that was supposed to play a sound. But I did it wrong, it didn't work-
var clicks = 0;
function counting() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
<p>Clicks: <a id="clicks"></a></p>
Click counter.
Why can't I add:
if (clicks == 10) playSound();
To then let the sound play using:
var audio = document.getElementById("audio");
function playSound() {
audio.currentTime = 0;
audio.play();}
The audio is defined with the ID audio in HTML.

Your mistake was instead of "===" you used "=="
var clicks = 0;
function counting() {
clicks++;
document.getElementById("clicks").innerHTML = clicks;
if (clicks === 10) {
playSound();
}
}
var audio = document.getElementById("audio");
function playSound() {
audio.currentTime = 0;
audio.play();
}
<p onclick="counting();">Clicks: <a id="clicks"></a></p>
<audio id="audio" controls="">
<source src="https://www.html-seminar.de/downloads/musikausschnitt-mike-coustic-memories.mp3" type="audio/mpeg">
</audio>

You might need to use eventListener in order to count the clicks.
See: https://www.w3schools.com/js/js_htmldom_eventlistener.asp
If you'd use jQuery, the click() method may help.
See: https://www.w3schools.com/jquery/event_click.asp
You can also use the on() method to bind multiple events at the same time.
See: https://www.w3schools.com/jquery/event_on.asp
As for performing an action after a certain amount of clicks, you will likely need to incorporate either method within your counter. Hope this helps in some way!

I would add an eventlistener for clicks and after each click it checks if the clickcounter is == 10;
Var counter = 0
document.getElementById("clicks").addEventListener(‚click‘, () => {
Counter++
if (clicks == 10) {
playSound()
}
})

Try (instead == you can use e.g. >= to run function more than once)
document.onclick = e=> msg.innerHTML= (++counter==10) ? playSound() : counter ;
function playSound() { return "Play sound/ show picture" }
let counter=0;
<div id="msg">Click somewhere</div>

Autoplay html5 video when another one end just once

I'm pretty sure this is a simple question, but I have no idea how to do it.
$(".options .option1").click(function() {
var video = $("#video1").get(0);
video.play();
return false;
});
$('#video1').bind('ended', function () {
$('.option-profesional').addClass('open');
setTimeout(function(){
var video = $("#video2").get(0);
video.play();
return false;
}, 4250);
});
And this:
$(".options .option2").click(function() {
var video = $("#video2").get(0);
video.play();
return false;
});
$('#video2').bind('ended', function () {
$('.option-personal').addClass('open');
setTimeout(function(){
var video = $("#video1").get(0);
video.play();
return false;
}, 4250);
});
So... I start one video "personal or profesional" by clicking a button. When this video ends start the second video and vice versa. Which it's basically a bucle.
What I'm looking for it's to stop that bucle. So when you already watched the first one don't start this one when the second one ends.
For dummys, because I'm pretty bad explaining this:
What I want:
video1 > video2 > END (by showing a text or something.)
video2 > video1 > END (by showing a text or something.)
What it's currently doing my code:
video2 > video1 > video2 > video1 > video2 > video1... and vice versa.
Thank you!

Since your checking with jQuery that if a video is ended by binding (ended), how about you make a Flag, when video2 is completed, change the flag to true and wrap the video playing script inside of an if statement. This way you can show a message or do whatever you like. Repeat for condition 2, video2 > video1> turn it to true when video1 is ended and wrap it inside of an if statement, then compare. Does this help a bit?
So something like this:
video_status = false;
if (video_status == false) {
$(".options .option1").click(function() {
var video = $("#personal").get(0);
video.play();
return false;
});
$('#video1').bind('ended', function () {
$('.option-profesional').addClass('open');
setTimeout(function(){
var video = $("#profesional").get(0);
video.play();
video_status = true; // < This condition should end this run. On refresh or reload the condition resets to false and repeats.
return false;
}, 4250);
});
}

Set interval play audio only loop audio once?

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.

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