Set interval play audio only loop audio once? - javascript

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.

Related

Do I have to click on the screen to play sound? How to auto active the sound after the page has loaded completely?

I have a timer with counting sound effects. However it works only if I can click on the screen before the timer has been triggered. I have tried body trigger onClick event but with no luck. Any suggestions? thanks.
HTML
<audio controls id="soundCount" class="d-none embed-responsive-item">
<source src="counting.mp3" type="audio/mp3">Your browser does not support the <code>audio</code> element.
</audio>
JS
function playSoundCount() {
document.getElementById("soundCount").load();
document.getElementById("soundCount").play();
}
function timer() {
var counter = 10;
var interval = setInterval(function() {
counter--;
if (counter <= 0) {
clearInterval(interval);
return;
}
else if(counter <= 10){
playSoundCount()
}
else{
console.log(Math.floor(counter));
}
}, 1000);
}

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>

Set the current time for an audio object when a page loads

How do I set the current time for an audio object when a html page loads? This is what I am currently doing:
var a = document.getElementById("myAudio");
a.addEventListener("timeupdate", function() {
console.log(this.currentTime);
// do other stuff like display the current time
}
var isCurrentTimeSetOnStartup = false;
a.addEventListener("canplay", function() {
if (isCurrentTimeSetOnStartup == false){
this.currentTime = startTime;
isCurrentTimeSetOnStartup = true;
}
});
which I think is ugly. If I don't have the isCurrentTimeSetOnStartup guard then the two events trigger each other.
You can place your script at the bottom of the <body> tag and then use the following code to set the currentTime of your Audio Source.
let a = document.querySelector('#myAudio');
let startTime = 2;
a.addEventListener('canplay', function handler() {
// Time in seconds
this.currentTime = startTime;
// Remove the event listener
this.removeEventListener('canplay', handler);
});
a.addEventListener('timeupdate', function() {
//Time in seconds
console.log(this.currentTime);
});
// Play on DOM-Load
a.play();
<!--http://picosong.com/wwPMj/-->
<audio id="myAudio" controls>
<source src="https://www.computerhope.com/jargon/m/example.mp3" type="audio/mpeg">
Your browser does not support HTML5 video.
</audio>

Sound doesn't play the expected amount of times

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

How to set time duration for html video

am trying to assign time duration to the playlist.... but as am using onend that function is calling after completing that video, but what i want is the video should play only on its assigned time duration after that it should stops and next video should play..am using following code...
<video id="myVideo" height="100%" width="100%" autoplay onended="run();">
<source id="ss" src="video/video1.ogg" type='video/ogg'>
</video>
<script type="text/javascript">
// num_files++;
//alert(num_files);
video_count =1;
videoPlayer = document.getElementById("ss");
video=document.getElementById("myVideo");
time2= Math.round(+new Date()/1000);
function run(){
for(i=1;i<=3;i++)
{
//alert(duration[i]);
time1= Math.round(+new Date()/1000);
// alert('ctime'+time1);
dur_time=parseInt(time2,10)+parseInt(duration[i],10);
// alert('dtime'+dur_time);
video_count++;
if(time1<dur_time)
{
video_count--;
//alert(video_count);
if (video_count > num_files) video_count = 1;
videoPlayer.setAttribute("src","video/video"+video_count+".ogg");
//alert(video_count);
video.pause();
video.load();
video.play();
time1= Math.round(+new Date()/1000);
}
}
}
</script>
You need to tap into the timeupdate event which is updated when playing the video:
video.addEventListener('timeupdate', function() {
if (this.currentTime >= dur_time) {
this.pause();
/// next action
}
}, false);
You could probably achieve the same using polling (ie. setTimeout/setInterval/requestAnimationFrame) but using the event is a more clean approach and will only update on an actual time change.
Update
You can also stop a video after a certain duration this way, however, this is not "frame accurate" but can perhaps help in some extreme cases:
var seconds = 3;
setTimeout(stopVideo, seconds * 1000); /// ms
video.play();
function stopVideo() {
if (video.isPlaying) {
video.pause();
/// next action
}
}
instead of setTimeout we can use the following code and its working fine for me
video.addEventListener("timeupdate", function() {
// alert(video_count);
dur_time=parseInt(time2,10)+7;
if (this.currentTime >= 7 || time1 >= dur_time) {
this.pause();
advanceVideo();
time2= Math.round(+new Date()/1000);
}
time1= Math.round(+new Date()/1000);
}, false);

Categories