I have a couple of music players in my website, all from a same plugin as
<audio id="player2" src="//filename" type="audio/mp3" controls="controls"></audio>
I want the previous audio player to stop when the user plays audio from another player.
I am a beginner so wish to have an easy explanation.
You need to listen to the play event and run pause on other players.
var audios = document.getElementsByTagName('audio'); // We get a list of all audio elements
audios.forEach(function(player) {
player.addEventListener('play', function() { // We listen for the `play` event on each player
audios.forEach(function(player2) {
if (player !== player2) { // we find other players which don't match the one that started
player2.pause(); // we pause those other players
}
});
});
});
Related
I have music playing and I want it to stop when I get to the game over routine.
I initialize it in the body:
<audio id="music" src="sw_music.mp3" autoplay></audio>
and try to stop it here:
case 25://You're dead
document.getElementById("audio");
audio.pause();
I tried using the audio stop in a function but it did not stop.
I also use a laser blast audio component:
<audio id="laser" src="Laser.mp3"></audio>
As mentioned at the comments:
var music = document.getElementById("music");
music.pause();
How can i make three HTML audio elements work sequentially repeated each one three times or more.
means I will make the first audio work three times, then the second work three times, then the third three times
I have this code, but i don't have an idea to make the audio elements repeated:
HTML & JavaScript:
function play(j){
var audio = document.getElementById('audio'+j); //declaring audio
audio.play(); //playing audio
audio.addEventListener('ended', function (){ //after audio ends, it will check weather it will play again or no
j++;
if(j<=3){
play(j);
}
})
}
<audio controls id="audio1">
<source src="http://learn.shayhowe.com.s3-website-us-east-1.amazonaws.com/assets/misc/courses/html-css/adding-media/jazz.ogg" type="audio/mpeg">
your browser doesn't support audio
</audio><br/>
<audio controls id="audio2">
<source src="http://learn.shayhowe.com.s3-website-us-east-1.amazonaws.com/assets/misc/courses/html-css/adding-media/jazz.ogg" type="audio/mpeg">
your browser doesn't support audio
</audio><br/>
<audio controls id="audio3">
<source src="http://learn.shayhowe.com.s3-website-us-east-1.amazonaws.com/assets/misc/courses/html-css/adding-media/jazz.ogg" type="audio/mpeg">
your browser doesn't support audio
</audio>
<button onclick="play(1)">run audio</button>
function play(j){
var audio = document.getElementById('audio'+Math.floor(j)); //declaring audio
audio.play(); //playing audio
audio.addEventListener('ended', function (){ //after audio ends, it will check weather it will play again or no
j+=1/3;
if(j<=3){
play(j);
}
})
}
Simply just increase by a third (and round the number if you use it), so that it plays three times...
Or more beautiful (using an double-recursive approach ;)):
function playthree(i){
(function play(c){
var audio = document.getElementById('audio'+i); //declaring audio
audio.play(); //playing audio
audio.addEventListener('ended', function (){ //after audio ends, it will check weather it will play again or no
if(c>=3 ){//if more than three per audio
if(i<3){//and not reached the last audio
playthree(i+1);//play next audio
}//else end all
}else{//we didnt reached the third play, lets keep going...
play(c+1);
}
});
})(1)//start with 1
}
I want to create an audio playlist that can only play and pause. However, when the user is done listening to the entire song, I want to be able for that user to re-play the song.
Currently, the Javascript playlist only plays and stops the music. My pause button is not really working like a pause button. Not sure where I went wrong. And how exactly can I get the song to automatically re-set to the beginning once the user finishes listening to the song? I would very much appreciate the help on this! I wrote the HTML audio code already and just listed the Java Script below.
<script> // play/pause button
$(function() {
$('#play').click(function(){
$('#pause').attr('src',"media/pause.png");
});
});
$(".playBtn").on('click', function() {
var target = $(this).attr("target");
$("#audio").attr("src",target);
$("#audio").trigger("play");
});
$(".pauseBtn").on('click', function() {
$("#audio").trigger("pause");
});
});
</script>
Audio tags have several events to which you can add listeners. Here is a link to a list of them: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
The "ended" event triggers when the audio is finished playing, so it could help with resetting the song to the beginning when the audio reaches the end.
$("#audio").on("ended", function () {
this.currentTime = 0;
});
You can use loop attribute at <audio> element to continuously loop single audio source. Substitute caching <audio> DOM element for jQuery object to call .play(), .pause() at click events.
javascript
$(function() {
var audio = $("#audio")[0];
$(".playBtn").on("click", function() {
audio.play()
});
$(".pauseBtn").on("click", function() {
audio.pause()
});
})
html
<audio id="audio" src="/path/to/audio/source" loop autoplay controls></audio>
<button class="playBtn">Play</button>
<button class="pauseBtn">Pause</button>
jsfiddle https://jsfiddle.net/kkf33dpr/
I have a program to calculate the mean of a numbered array , and i allow the user to enter his answer , i want to play (success sound) if the user answer equals the real answer , and play (error sound) if not.
function calcMean(){
...}
function solution(){
...
if(useranser==realanswer){
//play success sound by calling soundPlay()}
if(useranswer!==realanswer){
//play error sound by calling soundPlay()}
function soundPlay(){
//somthing
}
I design the program in HTML not HTML5. I would like know how to load the audio file(the success sound) and then how i can trigger it to start playing once a user provides a correct answer.
Keep a hidden audio player in your html page
<audio controls id="player" style="display: none">
<source id="player-src" src="#"></source>
</audio>
load the src dynamically and play it
function solution(){
if(useranser==realanswer){
soundPlay("success sound src");
}
if(useranswer!==realanswer){
soundPlay("error sound src");
}
}
function soundPlay(src){
var audioElement = document.getElementById('player-src');
audioElement.src =src ; //src for the player
var myAudio = document.getElementById("player");
myAudio.load();
myAudio.play();
}
I'm in the early stages of setting up a band site where there are a number of sample audio streams. Each stream is triggered or stopped by separate "Play" and "Pause" buttons. There are also a number of videos on the page which have their own controls. I used the following code for setting up the audio samples:
$("#play0").click(function() {
$("#audio0").trigger('play');
});
$("#pause0").click(function() {
$("#audio0").trigger('pause');
});
The "audio0" ID is for each audio stream (up to "audio9") while "play0" and "pause0" IDs (also up to "play/pause9") are for buttons. How can I make sure that at any one time, only one audio file should be playing (irrespective of whether it is audio or video). In other words, a user cannot trigger more than one audio stream to play simultaneously. Thank you.
Try something like this
var media = $('audio, video');
function pauseAll() {
media.each(function() {
var element = $(this).get(0);
element.pause();
});
}
$("#play0").click(function(){
pauseAll();
$("#audio0")[0].play();
});