Hello I'm trying to create a play and pause button for a little web application I'm creating. I've already made a button that plays and another button that pauses but but now I need a button that'll run the play function when clicked and go back to the pause button when clicked.
var audio = new Audio("audio.mp3");
$(".play").click(function () {
audio.play();
})
$(".pause").click(function () {
audio.pause();
$(this).toggleClass(".play");
});
And here's the buttons
<div class="play"><img src="../images/play.gif"></img></div>
<div class="pause"><img src="../images/pause.gif"></img></div>
I know there could be and easy way to make a div change classes every time its clicked.
I would set up the <html> like this:
<div id="play"><img src="../images/play.gif"></img></div>
<!-- initially a play button -->
Then I would just use a boolean to switch back and forth in the script.
var toggleIt = false;
$("#play").click(function(){
if (!toggleIt){
audio.play();
toggleIt = true;
$("#play").find("img").attr("src", "file url here");
}
else{
audio.pause();
toggleIt = false;
$("#play").find("img").attr("src", "file url here");
}
})
edit: and here is a fiddle using wonderful place holder kittens. Yes, you should be grateful for my exquisite taste in placeholder pictures.
var audio = new Audio("audio.mp3");
$(".play").click(function () {
$(this).hide();
$(".pause").show();
audio.play();
})
$(".pause").click(function () {
audio.pause();
$(this).hide();
$(".play").show();
$(this).toggleClass(".play");
});
this is the simplest way. it would probably be better to do it with css psuedo classes, but i leave this pleasure to you if you care enough
You can create 2 diferents button and change de visibility
var audio = new Audio("audio.mp3");
$("#play").click(function () {
audio.play();
$("#play").hide();
$("#pause").show();
})
$("#pause").click(function () {
$("#pause").hide();
$("#play").show();
});
Set a variable then use a conditional to see if you should either play or pause the audio:
<div class="button"><img src="../images/play.gif"></img></div>
var play = true;
$(".button").click(function(){
if (play){
// Play
audio.play();
$(".button img").attr("src", "../images/pause.gif");
play = false;
} else {
// Pause
audio.pause();
$(".button img").attr("src", "../images/play.gif");
play = true;
}
});
Example
var audio = new Audio("audio.mp3");
$(".play").click(function () {
$(this).hide();
$(".pause").show();
audio.play();
})
$(".pause").click(function () {
audio.pause();
$(this).hide();
$(".play").show();
$(this).toggleClass(".play");
});
Related
I am new to Jquery and Javascript. I want my code to play a sound when clicking anywhere in the document, and a different sound when double clicking on a .marker.
It works right now, but when I double click the marker it plays the .click function twice along with the double click function.
How do I prevent the .click from playing when I double click?
Here is my Jquery code:
$(document).ready(function () {
$(document).click(function () {
setTimeout(function () {
let audio = document.createElement("audio");
audio.src = "audio/click-audio.wav";
audio.play();
}, 700);
});
$('.marker').dblclick(function () {
let audio = document.createElement("audio");
audio.src = "audio/page-audio.wav";
audio.play();
});
});
Just check whether clicked element is .marker :
$(document).click(function(event) {
if($(event.target).is(".marker")) return ;
setTimeout(function() {
let audio = document.createElement("audio");
audio.src = "audio/click-audio.wav";
audio.play();}, 700);
});
Using event properties, you could achieve
$('marker').click(function(event) {
if(!event.detail || event.detail == 1){
// code here.
// It will execute only once on multiple clicks
}
});
The stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.
$(document).click(function () {
setTimeout(function() {
let audio = document.createElement("audio");
audio.src = "audio/click-audio.wav";
audio.play();}, 700);
});
$('.marker').click(function (event) {
let audio = document.createElement("audio");
audio.src = "audio/page-audio.wav";
audio.play();
event.stopPropagation();
});
});
hope it will help you
I'm using code that plays sound whn image is loaded (i'm using this as a play button on music player). But I have a problem, you can't stop sound when image is clicked (play button). So, do you know how can I make on this code, so sound pause when image is clicked.
My code:
<script type="text/javascript">
//Create new function that will update the image source on click.
function updateImage(el, soundfile) {
//Determine if music is playing or paused then adjust image
source accordingly.
if(soundfile.mp3.paused) {
el.src =
"imageurl.com";
} else {
el.src = "secondimageurl.com";
}
};
function playSound(el,soundfile) {
if (el.mp3) {
if(el.mp3.paused) el.mp3.play();
else el.mp3.pause();
} else {
el.mp3 = new Audio(soundfile);
el.mp3.play();
}
//Call new function made whenever the sound is toggled.
updateImage(document.getElementById("Bottom-1"), el);
};
</script>
<body onload="playSound(this, 'soundsource.mp3');">
<img src="buttonimage.html" name="Bottom-1" width="50" height="45"
border="0" id="Bottom-1"/>
</span>
</body>
Use SoundPlayer.js.
// Initialize
const player = new SoundPlayer();
// Load the sound
const sound = player.load('Sound.mp3');
// Play the sound
sound.play();
// load & play in one line
const sound = player.load('Sound.mp3').play();
And bind the image onclick event
image.onclick = function () {
sound[ sound.isPlaying ? 'pause' : 'play' ]();
image.src = sound.isPlaying ? 'isPlaying.jpg' : 'isPaused.jpg';
}
Full fiddle: https://jsfiddle.net/GustavGenberg/dxgph924/
I have the following html and script to play/pause an audio by clicking a button.
<audio id="testAudio" hidden src="sample.mp3" type="audio/mpeg">
</audio>
<button id="playAudio">Play</button>
<script>
document.getElementById("playAudio").addEventListener("click", function(){
var audio = document.getElementById('testAudio');
if(this.className == 'is-playing'){
this.className = "";
this.innerHTML = "Play"
audio.pause();
}else{
this.className = "is-playing";
this.innerHTML = "Pause";
audio.play();
}
});
</script>
I need to edit it in such a way as to play multiple mp3 files one by one in a defined order and stop only when the last audio has played.
I just don't know how to make that work. Can anyone help?
You can register an event handler for the audio tag, that first when the current file has finished;
document.getElementById("testAudio").addEventListener("ended",function(e) {
// Play next track
});
If you have a list of tracks to play in an array, then simply play the next one after the current track has finished. Using the setTimeout function you can put in a delay between the tracks. A simple example is as follows;
<script>
var playlist= [
'https://api.twilio.com/cowbell.mp3',
'https://demo.twilio.com/hellomonkey/monkey.mp3'
];
var currentTrackIndex = 0;
var delayBetweenTracks = 2000;
document.getElementById("playAudio").addEventListener("click", function(){
var audio = document.getElementById('testAudio');
if(this.className == 'is-playing'){
this.className = "";
this.innerHTML = "Play"
audio.pause();
}else{
this.className = "is-playing";
this.innerHTML = "Pause";
audio.play();
}
});
document.getElementById("testAudio").addEventListener("ended",function(e) {
var audio = document.getElementById('testAudio');
setTimeout(function() {
currentTrackIndex++;
if (currentTrackIndex < playlist.length) {
audio.src = playlist[currentTrackIndex];
audio.play();
}
}, delayBetweenTracks);
});
</script>
Note that cowbell track is 52 seconds long, so if your testing the above (for your own sanity) set the controls property to the audio tag so you can skip through most of it.
Could someone please help me add some simple functionality to this string?
Here is what I use to allow people to click on an image and play an audio file...the song plays until its over and wont stop. I would like to allow people to click it a second time to stop the song, and reset it back to the beginning:
$(document).ready(function()
{
var element = $('#starspangledbanner');
var audio = new
Audio('http://siteassets.starspangledbanner.mp3');
element.click(function(e)
{
e.preventDefault();
audio.play();
});
});
Thanks in advance.
You can follow this code. It's very easy and woks fine:
$(document).ready(function(){
var element = $('#starspangledbanner'),
audio = new Audio('http://siteassets.starspangledbanner.mp3');
element.click(function(e){
e.preventDefault();
if(audio.paused){
audio.play();
}else{
audio.pause();
audio.currentTime = 0;
}
});
});
I have a link with icon play, when I click in this icon I want to start play a sound. And in the moment that the sound starts I want to show a stop icon replacing the play icon.
I am trying to do this with this code below, but isn´t working:
jquery:
$(function(){
function play() {
var audio = document.getElementById('audio1');
if (audio.paused) {
audio.play();
}else{
audio.pause();
audio.currentTime = 0
}
}
});
is this what you need?
I made a fiddle: http://jsfiddle.net/boqs38pf/
HTML:
<audio id="audio1" src="http://www.freesfx.co.uk/rx2/mp3s/10/11771_1410942915.mp3"></audio>
<a id="play" href="#" onClick="play()"><i class="fa fa-play"></i></a>
<a id="stop" href="#" onClick="play()"><i class="fa fa-stop"></i></a>
Jquery:
$(document).ready(function() {
var audioElement = document.getElementById('audio1');
$('#stop').hide();
$('#play').click(function() {
$('#play').hide();
$('#stop').show();
audioElement.play();
});
$('#stop').click(function() {
$('#play').show();
$('#stop').hide();
audioElement.pause();
});
});
To make it more dynamic for multiple audio files what you would want to do is assign each button an id with a number that would match the id of the song you want it to control. After that you need to add to the .click function some code that will get the id of the button clicked and and play the song with the relevant Id.
$('.play').click(function(){
var i = $(this).attr('id');
var c = parseInt(i);
var g = '#idofsong' + c;
g.play();
});
Edit: here is a working fiddle
Also you want to use var c = i.replace(/[A-Za-z$-]/g, ""); instead of parseInt if the id contains letters