I've got multiple instances of the html5 audio player on my page, and I use the jQuery fadeIn() fadeOut() to determine which song to play. When clicking a link to a different page, I have the current playing sound fade out volume, then stop, then reset progress to 0 seconds, then the page (along with the audio player) fades out and the new page fades in. I'm able to fade out the volume, but I can't reset the timer to 0 seconds for some reason:
<script>
$('.link').on('click', function(e){
$('audio').currentTime = 0; /*reset timer*/
displayNone(); /*fade out current page*/
$(this.getAttribute("href")).fadeIn(); /*fade in target page*/
stopAudio();
});
function displayNone() {
$('.pagecontainer>div').fadeOut();
}
function stopAudio() { //fade out any current audio
$('audio').animate({volume: 0}, 1000);
setTimeout(function(){('audio').pause()},1000) /*stop audio after fading out volume*/
}
$('.sound').on('play', function () {
$('audio').animate({volume: 1}, 100); /*reset volume to 100% after clicking play button on player*/
});
</script>
....
....
page 1
page 2
page 3
<div class="pagecontainer">
<div id="page1">
<audio controls class="sound">
<source src="music1.mp3"/>
<source src="music1.ogg"/>
</audio>
</div>
<div id="page2">
<audio controls class="sound">
<source src="music2.mp3"/>
<source src="music2.ogg"/>
</audio>
</div>
<div id="page3">
<audio controls class="sound">
<source src="music3.mp3"/>
<source src="music3.ogg"/>
</audio>
</div>
</div>
For example:
I'm currently on page1, with music1.mp3 playing for 10 seconds
I click the link to page2 without stopping music1.mp3, and music1.mp3 volume fades out along with with page1, and page2 fades in successfully along with the music player for music2.mp3
After let's say 10 seconds I click link for page1 to go back to page1
The player for music1.mp3 is still playing (progress is 20 seconds) and haven't stopped, but now with zero volume
I don't get why music1.mp3 is not resetting its timer to 0 seconds and stopping fully.
Thanks!
Probably because .currentTime is not a jQuery method. Try something like $('audio')[0].currentTime.
Edit:
$('audio').each(function() {
$(this).currentTime = 0;
});
Related
I need help looping a HTML5 audio clip.
I have the below script, but it only plays once. I need it to play the music clip when the link is pressed and plays non-stop in a loop. The audio can only then be stopped when refreshing the page or but selecting the link again:
Link here
<script>
// Sound for background music
var html5_audiotypes={
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}
function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error("")}}
}
}
//Initialize two sound clips with 1 fallback file each:
var mouseoversound=createsoundbite("music.ogg", "music.mp3")
var clicksound=createsoundbite("music.ogg", "music.mp3")
</script>
Thank you.
why don't you try using the audio tag and add the attribute loop so it would loop back to back
replace the src with your own audio file to see it looping
<h1>The audio loop attribute</h1>
<p>Click on the play button to play a sound:</p>
<audio controls loop>
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
click this link to see its working
I currently work on a little website project. For this one I need buttons with pics and sound. Well, now I already work for a while on it, but the sound still does not work (except on one way completely in html....but I don't want that). It must work in Chrome and Firefox. I also need to look/want to now (still a beginner) how I can turn the sound on and off each time I press the button, but first, I want to hear sound at all...
So what can I do here?
I work in HTML/pug and ts (could only find js in code here, but well):
function playMusicButton1(){
let music = new Audio("/sound/revolution.mp3");
music.loop = true;
music.play();
}
playMusicButton1();
button(onClick="playMusicButton1()")
img(src="img/Music_Buttons_pixel_sun.png")
Run Snippet code!
You can customize this code further as per your requirement.
<!DOCTYPE html>
<html>
<body>
<audio id="audioFile">
<source src="https://rb.gy/v4em61" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button>
<script>
var x = document.getElementById("audioFile");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
</script>
</body>
</html>
WANT TO SHOW AUDIO CONTROL
just put controls in audio tag
<!DOCTYPE html>
<html>
<body>
<!--just add "controls" in audio tag-->
<audio id="audioFile" controls>
<source src="https://rb.gy/v4em61" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button>
<script>
var x = document.getElementById("audioFile");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
</script>
</body>
</html>
I am currently working on a homepage for myself.
My idea is to use our intro video as intro for the website. After its finished i want so switch to home.html
thats my curent index.html:
<body>
<video id="introVideo" autoplay muted>
<source src="images/logo.webm">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("introVideo");
vid.onended = function() {
alert("The video has ended");
};
</script>
The alert is working, i am searching a funtion to switch to home.html now.
ty for your help.
I have 2 Vimeo players in my page when I play the first video then play second video first one gets paused.
var vid1=new Vimeo.Player($('.one'));
var vid2=new Vimeo.Player($('.two'));
$('.btnonePlay').on('click',function(){
vid1.play();
})
$('.btnonePause').on('click',function(){
vid1.pause();
})
$('.btntwoPlay').on('click',function(){
vid2.play();
})
$('.btntwoPause').on('click',function(){
vid2.pause();
})
Steps on how to reproduce the issue:
Click on play video one
Click on play video two
Player one will pause when the 'play video two' button is clicked.
Working example on jsFiddle.
The entire code is also in the snippet below.
var vid1 = new Vimeo.Player($('.one'));
var vid2 = new Vimeo.Player($('.two'));
$('.btnonePlay').on('click', function() {
vid1.play();
})
$('.btnonePause').on('click', function() {
vid1.pause();
})
$('.btntwoPlay').on('click', function() {
vid2.play();
})
$('.btntwoPause').on('click', function() {
vid2.pause();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">
<iframe src="https://player.vimeo.com/video/286183716" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>Annihilation Song | Rubblebucket (Official Music Video) from Amanda Bonaiuto on Vimeo.</p>
</div>
<button class="btnonePlay"> Play video one</button>
<button class="btnonePause"> Pause video one</button>
<div class="two">
<iframe src="https://player.vimeo.com/video/286183716" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>Annihilation Song | Rubblebucket (Official Music Video) from Amanda Bonaiuto on Vimeo.</p>
</div>
<button class="btntwoPlay"> Play video two</button>
<button class="btntwoPause"> Pause video two</button>
By default on our Vimeo videos we enable autopause. Autopause is when one video automatically pauses when another starts playing. Most people do not want two videos playing at the same time.
However, if you do want that you can turn off autopause by using the embed parameter attached to the url ?autopause=0. I have adjusted your jsfiddle to work accordingly. Working JSFiddle!
You can learn more about the available embed parameters from our API readme or this help article.
Is it possible to detect when the play button in the html5 audio player is clicked?
For example:
<audio controls>
<source src="music.mp3"/>
<source src="music.ogg" />
</audio>
....
....
$('playbutton').on('click', function(e){
//some functions
});
Sounds like (heh) you're looking for the play event.
<audio controls id="player">
<source src="music.mp3">
</audio>
<script>
var player = document.getElementById("player");
player.addEventListener("play", function () {
console.log("it's go time");
});
</script>
For a full list of the available events, at least according to the spec, check out the WHATWG doc