the button plays audio. I'd also like it to also simultaneously start the timer below. As of now the timer starts immediately when the page loads. I'd like for it to only start along with the audio when I press the button. I can't figure out the syntax.
<button class="button1"
onclick="document.getElementById('sound1').play()">
</button>
<p> Time ends in <span id="countdowntimer">10 </span> Seconds</p>
<script type="text/javascript">
var timeleft = 10;
var downloadTimer = setInterval(function(){
timeleft--;
document.getElementById("countdowntimer").textContent = timeleft;
if(timeleft <= 0)
clearInterval(downloadTimer);
},1000);
**strong text**</script>
Use currentTime and duration properties to calculate left time, here is an example:
var sound1 = document.getElementById('sound1');
var countDownTimer = document.getElementById('countdowntimer');
function play() {
sound1.play();
};
function updateTimer() {
countDownTimer.textContent = Math.floor(sound1.duration) - Math.floor(sound1.currentTime);
}
<audio id="sound1" src="https://ia902508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3" ontimeupdate="updateTimer()" >
Your browser does not support the <code>audio</code> element.
</audio>
<button class="button1" onclick="play()">Play</button>
<p> Time ends in <span id="countdowntimer"></span> Seconds</p>
Related
I need to call a script and specify 3 parameters, audio file ID, audio start time, audio end time (optional).
With zero prior JS knowledge, I'm unable to get this script I stitched together to work flawlessly. The main bug now is that if EventListener is active and a segment is still playing and the user clicks on another segment, it should cancel active EventListener and assign a new one if end time is specified.
Any help would be great.
<!DOCTYPE html>
<script>
function audio_play(fileID, sTime, eTime){
var audio = document.getElementById(fileID);
var segmentEnd;
audio.pause();
audio.currentTime = 0;
audio.addEventListener('timeupdate', function (){
if (segmentEnd && (audio.currentTime >= segmentEnd)) {
audio.pause();
segmentEnd = 0;
audio.currentTime = 0;
}
console.log(audio.currentTime);
}, false);
audio.currentTime = sTime;
segmentEnd = eTime;
audio.play();
}
</script>
<body>
<html lang="en">
<audio id="id1" src="1.mp3" controls preload></audio>
<audio id="id2" src="2.mp3" controls preload></audio>
<p>File 1 / Segment (15-20)</p>
<p>File 1 / Segment (60-65)</p>
<p>File 1 / Segment (20 ...)</p>
<br>
<p>File 2 / Segment (15-20)</p>
<p>File 2 / Segment (30-35)</p>
<p>File 2 / Segment (40 ...)</p>
</body>
</html>
I tried to add temporary variable to interrupt EventListener. It didn't work.
First time posting on here so go easy.
I am having some problems with a recent project. I am trying to create a countdown as the landing page with audio sounds for each number (street fighter 2 sound effects if anyone is familiar). I have managed to get the countdown to work and it will work but only at the click of a button as this is the only way I could get it to work.
Like I said this is not the desired effect as once the countdown finishes I want it to load the main page. Also in regards to adding the sound to each individual number, I have absolutely no idea where to start!
This is my current JS for it
document.addEventListener('DOMContentLoaded', () => {
const timeLeftDisplay = document.querySelector('#time-left')
const startBtn = document.querySelector('#start-button')
let timeLeft = 10
function countDown (){
setInterval(function(){
if(timeLeft <= 0){
clearInterval(timeLeft = 0)
}
timeLeftDisplay.innerHTML = timeLeft
timeLeft -= 1
}, 1000)
}
startBtn.addEventListener('click', countDown)
} )
This is the current HTML
<script type= "text/javascript" src="assets/javascript/script.js"></script>
<title>Bro-nament</title>
</head>
<body>
<div class="container text-center">
<h1 class="bro-title"> TIME TILL BRO - DOWN</h1>
<h2 id="time-left"> 10 </h2>
<button id="start-button"> <i class="fas fa-fist-raised"> Continue? </i> <i class="fas fa-fist-raised"></i></button>
Current page view
Thanks
In your server, you need to name your audio files with a number for all of them and use the value of time variable to increment and get the url of the file for each every seconde.
Like :
9.mp3
8.mp3
7.mp3
6.mp3
....
Once the counter is to 0, you redirect where the url you want.
let time = 10;
countdown();
function countdown() {
// we upadate number text
document.querySelector('#time-left').textContent = --time;
// if count is equal to 0 (end of counter)
if (time === 0) {
time = 10;
// we redirect to this url
window.location.href = "http://www.google.com";
// we stop the loop
return false;
}
//console.log(time);
// we set the url of audio file for each seconde
const audio = new Audio("https://srv-store5.gofile.io/download/RFgvcw/" + time + ".mp3");
// if you only want one, u dont need the const time
//const audio = new Audio("https://srv-store5.gofile.io/download/RFgvcw/1.mp3");
audio.play();
setTimeout(countdown, 1000);
}
#time-left {
font-size: 150px;
font-weight: bold;
margin: auto 0;
text-align: center;
}
<div id="time-left"></div>
Load Audio tag in a specific time(mp3) using javascript.
Current code bellow, complety ignores currentTime.
My objective is to autoplay a mp3 file based on time(seconds) of the computer hardware clock.
<!DOCTYPE html>
<html>
<body>
<button onclick="setCurTime()" type="button">Set time position to 5 seconds</button>
<br>
<audio id="audio1" controls="controls">
<source src="http://attackbeat.com/audio/Masayume%20Chasing.mp3" type="audio/mp3">
Your browser does not support HTML5 video.
</audio>
<script>
var time = new Date();
var timex = time.getSeconds();
myAudio=document.getElementById("audio1");
window.onload = function () {
myAudio.play();
myAudio.currentTime=10;
}
function setCurTime()
{
myAudio.currentTime=timex;
myAudio.play();
}
</script>
</body>
</html>
You can seek to the given time only once the meta data is available:
var audio = document.getElementById('audio1');
audio.onloadedmetadata = function() {
audio.currentTime = new Date().getSeconds(); // autoplay based on current time (seconds)
audio.play();
};
I have some code where the progress bar is linked to the audio paying; but i haven't worked out how to seek with the mouse cursor on the progress bar. Is there a way to do this in Legacy JavaScript?
JavaScript:
function play() {
document.getElementById('player').play();
}
function pause() {
document.getElementById('player').pause();
}
function updateProgress() {
var player = document.getElementById('player');
var progressbar = document.getElementById('seekbar');
progressbar.value = (player .currentTime / player .duration);
};
HTML:
<audio ontimeupdate="updateProgress()" src="music/fiji/lladep/apathy.mp3" id="player"></audio>
<button onClick="play()">Play</button>
<button onClick="pause()">Pause</button>
<progress id="seekbar" value="0" max="1"></progress>
I've my codes as below
<header>
<audio src="friends_and_family_03.mp3" id="audio" controls></audio>
<input type="range" step="any" id="seekbar"></input>
<script>
seekbar.value = 0;
var audio = document.getElementById("audio");
var seekbar = document.getElementById('seekbar');
function setupSeekbar() {
seekbar.min = audio.startTime;
seekbar.max = audio.startTime + audio.duration;
}
audio.ondurationchange = setupSeekbar;
function seekAudio() {
audio.currentTime = seekbar.value;
}
function updateUI() {
var lastBuffered = audio.buffered.end(audio.buffered.length-1);
seekbar.min = audio.startTime;
seekbar.max = lastBuffered;
seekbar.value = audio.currentTime;
}
seekbar.onchange = seekAudio;
audio.ontimeupdate = updateUI;
</script>
<p>
<button type="button" onclick="audio.play();">Play</button>
<button type="button" onclick="audio.pause();">Pause</button>
<button type="button" onclick="audio.currentTime = 0;"><< Rewind</button>
</p>
</header>
This is as explained in http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
My problems are
1) The seekbar max value is not set according to the audio duration. (The seekbar width is just around half the audio duration).
2) The seekbar doesnt show any progress as the audio plays on but if you drag the seekbar, the currenTime actually changes.
Can anyone help me modify my code so that it functions properly??
If you are caught up with the same problem, here's the solution. (I got it from another forum). Just add these two lines:
audio.addEventListener('durationchange', setupSeekbar);
audio.addEventListener('timeupdate', updateUI);
Or maybe I was just a little too stupid!! lol