SCRIPT AND HTML CODE: When i click on a button, the other buttons are working. I've one class for buttons so how can i use multiple this button ?
Shall i add data_id for each button ?
Is this what you need?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio controls>
<source src="http://www.noiseaddicts.com/samples_1w72b820/4160.mp3" id="audio" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Try adding a new class to the tag. And get the element on your JQuery by the new class, like this:
function play() {
var audio = document.getElementById('audio');
if (audio.paused) {
audio.play();
$('.play-button').addClass('icon-control-pause')
$('.play-button').removeClass('icon-control-play')
}else{
audio.pause();
$('.play-button').addClass('icon-control-play')
$('.play-button').removeClass('icon-control-pause')
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio src="audio.mp3" id="audio"></audio>
<i class="play-button icon-control-play i-2x" id="play" onclick="play()"></i>
Related
hello, i have a simple button
<a onclick="window.location.href=window.location.href" class="btn"> Stop </a>
and i have an audio source
<audio id="myAudio"> <source src="https://myweb.com/files/tuntun.mp3" type="audio/mpeg"> </audio>
and this is javascript
<script>
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
</script>
i want the audio play before refreshing the page when i click the button, i tried but my audio stops while refresh.
Bye the way i need it for ANDIOID Browser
I hope you can understand what I need because I'm bad at English
You will have to run a function on click... That will play the audio and then will refresh the page.
<a onclick="playAudio()" class="btn"> Stop </a>
<audio id="myAudio"> <source src="https://myweb.com/files/tuntun.mp3" type="audio/mpeg"> </audio>
<script>
let stopFlag = false
let x = document.getElementById("myAudio");
function playAudio() {
// Set a flag to know if the "stop" link was clicked
stopFlag = true
x.play();
}
// An event listener to reload the page after the video has ended if the "Stop" link was cliked
x.addEventListener('ended', () => {
if(stopFlag){
window.location.reload()
}
})
</script>
I'm trying to make it so that when you click on a separate element it pauses the current song playing from a different element. In addition I had previously made it so when you click on the same element after it started playing audio it would pause that audio, but when you click on a different element with the same function it breaks.
var paused = true;
var song;
var songPlaying;
function playSong(x) {
song = x;
if(songPlaying != song){
document.getElementById(songPlaying).pause();
}
if(paused == true){
document.getElementById(song).play();
paused = false;
songPlaying = song;
} else {
document.getElementById(song).pause();
paused = true;
}
}
Is there anyway I can fix this? Will I have to make a different function for every song?
EDIT 1: Here the HTML my for the sections I'm using as well, each audio file has an ID that is called as a parameter in the function inside onclick
<div class="album">
<img src="assets/BattalionsOfFear.png" onclick="playSong('bofSong')">
<h1>Battalions of Fear</h1>
<p>Released in 1988</p>
</div>
<div class="album">
<img src="assets/FollowTheBlind.png" onclick="playSong('bfsSong')">
<h1>Follow the Blind</h1>
<p>Released in 1989</p>
</div>
<!--- Audio -->
<audio id="bofSong">
<source src="assets/BattalionsOfFear.mp3">
</audio>
<audio id="bfsSong">
<source src="assets/BanishFromSanctuary.mp3">
</audio>
EDIT 2:
In attempting Laif's solution
I have tried adding the 'song' class to my HTML img elements and linked it to my audio element with the 'song1' class yet it still is not working. Am I doing the classes wrong or is it something with the way I have put them down?
<div class="album">
<img src="assets/BattalionsOfFear.png" class="song song1">
<h1>Battalions of Fear</h1>
<p>Released in 1988</p>
</div>
<audio id="bofSong" class="song1">
<source src="assets/BattalionsOfFear.mp3">
</audio>
Each song should share the same class so that you can do something like this:
<html>
<div class="song"></div>
<div class="song"></div>
</html>
var songs = document.querySelectorAll(".song");
function playSong(e) {
songs.forEach(el => {
el.style.play();
});
e.currentTarget.pause();
};
songs.forEach(el => {
el.addEventListener("click", playSong);
});
I just put together this code to play audio on hover.. on a test page, trying to incorporate it into the rest of the site, but the jQuery is clashing with other jQuery, and noconflict mode at this point is a pretty huge job. Is it possible to do the following using only javascript ?
<audio id="whiterose" preload="auto">
<source src="//sarahboulton.co.uk/audio/white-rose.mp3"></source>
<source src="//sarahboulton.co.uk/audio/white-rose.ogg"></source>
</audio>
<div class="whiterose">
white rose?
</div>
<script>
//change audio 1 to audio 2.. 3 .. etc
var audioOne = $("#whiterose")[0];
$(".whiterose a")
.mouseenter(function() {
audioOne.play();
});
</script>
http://sarahboulton.co.uk/audio.html#
Thanks !
<audio id="audio" preload="auto" src="http://sarahboulton.co.uk/audio/white-rose.mp3"></audio>
<div id="test" style="background-color:red;" class="whiterose">
white rose?
</div>
<script>
var test = document.getElementById("test");
test.addEventListener("mouseover", function( event ) {
var audio = document.getElementById("audio");
audio.play();
}, false);
</script>
I was hoping for some assistance with this. I have 3 audio instances on a single page. Handling the audio to play and pause isn't an issue. The issue is when audio is playing and I click play on another, I can't get the other audio instance to stop playing. So in the end I have these tracks all playing and I have to manual hit stop on each of them. My code below so far.
Honestly I am not sure how to go about doing the checks for this. First time doing something like this.
Any help would be appreciated :) thanks
HTML:
<div class="voting-artist">
<audio class="audio">
<source src="{{ song.url }}" type="audio/mpeg">
</audio>
<audio class="audio">
<source src="{{ song.url }}" type="audio/mpeg">
</audio>
<audio class="audio">
<source src="{{ song.url }}" type="audio/mpeg">
</audio>
</div>
jQuery/JavaScript:
$votingArtist.each(function(i, value) {
var $this = $(this);
var thisAudioPlayBtn = $this.find('.play-btn', $this);
var thisAudioStopBtn = $this.find('.stop-btn', $this);
var thisSelectionCont = $this.find('.selection--play-btn', $this);
var thisAudio = $this.find('.audio', $this);
thisAudioPlayBtn.on('click', function(e) {
thisAudio[0].play();
thisAudioPlayBtn.hide()
thisAudioStopBtn.show();
thisSelectionCont.addClass('is-playing');
});
thisAudioStopBtn.on('click', function() {
thisAudio[0].pause();
thisAudioPlayBtn.show()
thisAudioStopBtn.hide();
thisSelectionCont.removeClass('is-playing');
});
});
Just pause() them all!
thisAudioPlayBtn.on('click', function(e) {
$("audio").pause(); // Add this to pause them all.
$(".selection--play-btn").removeClass("is-playing"); // And remove the playing class everywhere too!
$(".play-btn").hide(); // Reset play/pause button
$(".stop-btn").show();
thisAudio[0].play();
thisAudioPlayBtn.hide()
thisAudioStopBtn.show();
thisSelectionCont.addClass('is-playing');
});
I want a function to be called just before play button is clicked.
A code which should work something like this :
<audio controls>
<source src="music.mp3"/>
<source src="music.ogg" />
</audio>
<script>
$('playbutton').on('click', function(e){
//some functions
});
</script>
Audio has onplay event.
<audio onplay="myFunction()">
You can watch for play and pause events.
<audio id="audio" controls>
<source src="music.mp3"/>
<source src="music.ogg" />
</audio>
var audio = document.getElementById('audio')
audio.addEventListener('play', () => console.log('play'))
audio.addEventListener('pause', () => console.log('pause'))
Media events