please look at this fiddle http://jsfiddle.net/rabelais/yLdkj/1/
The above fiddle shows three bars that on hover play audios. How do I change this so the music plays and pauses on click instead. Also if one audio is playing and another is clicked how can the already playing song pause?
$("#one").mouseenter(function () {
$('#sound-1').get(0).play();
});
$("#one").mouseleave(function () {
$('#sound-1').get(0).pause();
});
$("#two").mouseenter(function () {
$('#sound-2').get(0).play();
});
$("#two").mouseleave(function () {
$('#sound-2').get(0).pause();
});
$("#three").mouseenter(function () {
$('#sound-3').get(0).play();
});
$("#three").mouseleave(function () {
$('#sound-3').get(0).pause();
});
Try
<div id="sound-bars">
<div id="one" class="bars" data-target="#sound-1"></div>
<div id="two" class="bars" data-target="#sound-2"></div>
<div id="three" class="bars" data-target="#sound-3"></div>
</div>
<audio id="sound-1" class="sound">
<source src="http://angelaandtom.co.uk/lib/audio/Intro-.mp3"></source>
<source src="http://angelaandtom.co.uk/lib/audio/Intro-.oggvorbis.ogg"></source>
Your browser isn't compatible.
</audio>
<audio id="sound-2" class="sound">
<source src="http://angelaandtom.co.uk/lib/audio/you did not listen .mp3"></source>
<source src="http://angelaandtom.co.uk/lib/audio/you did not listen .oggvorbis.ogg"></source>
Your browser isn't compatible.
</audio>
<audio id="sound-3" class="sound">
<source src="http://angelaandtom.co.uk/lib/audio/can you hear me .mp3"></source>
<source src="http://angelaandtom.co.uk/lib/audio/can you hear me .oggvorbis.ogg"></source>
Your browser isn't compatible.
</audio>
then
var $sounds = $('.sound'),
$bars = $('#sound-bars .bars');
$bars.click(function () {
var $this = $(this),
$target = $($this.data('target')),
target = $target[0];
$bars.not(this).removeClass('playing');
$sounds.not($target).each(function () {
this.pause();
});
$this.toggleClass('playing');
if ($this.hasClass('playing')) {
target.play();
} else {
target.pause();
}
})
Demo: Fiddle
You can check pause all audio on click of a div, then just play the associated audio. You can tidy up the code a bit too:
jQuery:
$(".playbtn").click(function() {
// Pause all audio
$("audio").each(function(index, elem) {
elem.pause();
});
// Grab the associated sound ID
var soundId = $(this).data("soundid");
// Play the audio
$("#sound-"+soundId)[0].play();
});
HTML:
<div class="playbtn" data-soundid="1">Play #1</div>
<div class="playbtn" data-soundid="2">Play #2</div>
<div class="playbtn" data-soundid="3">Play #3</div>
<div class="playbtn" data-soundid="4">Play #4</div>
<audio id="sound-1">
<source src="http://angelaandtom.co.uk/lib/audio/Intro-.mp3"></source>
<source src="http://angelaandtom.co.uk/lib/audio/Intro-.oggvorbis.ogg"></source>
Your browser isn't compatible.
</audio>
<audio id="sound-2">
<source src="http://angelaandtom.co.uk/lib/audio/Intro-.mp3"></source>
<source src="http://angelaandtom.co.uk/lib/audio/Intro-.oggvorbis.ogg"></source>
Your browser isn't compatible.
</audio>
<audio id="sound-3">
<source src="http://angelaandtom.co.uk/lib/audio/Intro-.mp3"></source>
<source src="http://angelaandtom.co.uk/lib/audio/Intro-.oggvorbis.ogg"></source>
Your browser isn't compatible.
</audio>
<audio id="sound-4">
<source src="http://angelaandtom.co.uk/lib/audio/Intro-.mp3"></source>
<source src="http://angelaandtom.co.uk/lib/audio/Intro-.oggvorbis.ogg"></source>
Your browser isn't compatible.
</audio>
$("#one").click(function () {
pauseAll();
$('#sound-1').get(0).play();
});
$("#two").click(function () {
pauseAll();
$('#sound-2').get(0).play();
});
$("#three").click(function () {
pauseAll();
$('#sound-3').get(0).play();
});
function pauseAll(){
$("audio").each(function (){
this.pause();
});
}
This works fine here.
Related
I have tried two version
The first one autoplay is working on Google Chrome but how can I control with button that I can play or pause the audio?
<embed name="pop" src="pop.mp3" loop="true" hidden="true" autostart="true">
The second one autoplay is not working on Google Chrome but I can control it with button in IE or FireFox
<audio id="myAudio">
<source src="pop.mp3" type="audio/mp3">
</audio>
The buttons
<button onclick="playAud()" type="button">Play</button>
<button onclick="pauseAud()" type="button">Pause</button>
And the Javascript
var aud = document.getElementById("myAudio");
function playAud() {
aud.play(); }
function pauseAud() {
aud.pause(); }
So how can I deal with this problem?
I want the Audio autoplay in background
And then I can use button to play or pause it
You only have to trigger the play function on init:
var aud = document.getElementById("myAudio");
function play() {
aud.play();
}
function pause() {
aud.pause();
}
aud.play(); // this will do the trick :)
<audio id="myAudio">
<source src="https://wiki.selfhtml.org/local/Europahymne.mp3" type="audio/mp3">
</audio>
<button onclick="play()" type="button">Play</button>
<button onclick="pause()" type="button">Pause</button>
Old solution:
You could remove/add your embed-element like i did here. This might be hacky, but it could be a solution for you.
var audiowrapper = document.getElementById('audio-wrapper');
var audio = document.getElementById('audio');
function play() {
if (!audiowrapper.hasChildNodes()) audiowrapper.appendChild(audio);
}
function pause() {
if (audiowrapper.hasChildNodes()) {
while (audiowrapper.firstChild) {
audiowrapper.removeChild(audiowrapper.firstChild);
}
}
}
#audio-wrapper {
position: absolute;
top: -300px !important;
}
<div id="audio-wrapper">
<embed id="audio" name="pop" src="https://wiki.selfhtml.org/local/Europahymne.mp3" loop="true" hidden="true" autostart="true">
</div>
<button onclick="play();" type="button">Play</button>
<button onclick="pause();" type="button">Pause</button>
Try this:
<audio id="sound" src="sound.mp3" autoplay="0" autostart="0"></audio>
<button onclick="playAud()" type="button">Play</button>
<button onclick="pauseAud()" type="button">Pause</button>
<script>
let aud = document.getElementById("sound");
function playAud() {
aud.play();
}
function pauseAud() {
aud.pause();
}
I'm having trouble adding in jQuery's toggleClass function into the rest of my code. The page has several HTML5 audio tags on it which are controlled via jQuery. I attempted to add the toggle function to my jQuery audio control function, but it's not adding the class and subsequently the audio control doesn't work.. so I suppose it's some weird syntax error.
What do you guys recommend? Below is a jsFiddle and a my (unfortunately) weak attempt :)
http://jsfiddle.net/danielredwood/FTfSq/10/
HTML:
<div id="music_right">
<div class="thumbnail" id="paparazzi">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="danceinthedark">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="bornthisway">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
</div>
JavaScript:
var curPlaying;
$(function() {
$(".playback").click(function(e){
e.preventDefault();
var song = $(this).next('audio')[0];
song.toggleClass("playing");
if(song.paused){
song.play();
if(curPlaying) $("audio", "#"+curPlaying)[0].pause();
} else {
song.pause();
}
curPlaying = $(this).parent()[0].id;
});
});
//the function below works, but doesn't have the add/remove class functions
var curPlaying;
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if (song.paused) {
song.play();
if (curPlaying) $("audio", "#" + curPlaying)[0].pause();
} else {
song.pause();
}
curPlaying = $(this).parent()[0].id;
});
});
$('thumbnail').toggleClass('pausing playing');
ToggleClass: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
I would use .addClass() and .removeClass(), as it'll clean up your code quite a bit and allow you to use CSS to perform all that layout work:
$('thumbnail').toggle(function(){
$('.play', this).removeClass('pausing');
$('.play', this).addClass('playing');
}, function(){
$('.play', this).addClass('pausing');
$('.play', this).removeClass('playing');
});
I'm trying to start and stop two videos with two separate buttons. I've simply copied the code and renamed the variables, yet one piece of code works and one doesn't. I get the error 'TypeError: video2.pause is not a function at HTMLButtonElement.c'. Both videos and buttons are placed in modals respectively. Why am I getting this weird error, especially when exactly the same code works?
Javascript:
var video = document.getElementById("video.mp4");
var playButton = document.getElementById("play-pause");
var video2 = document.getElementById("video2.mp4");
var play = document.getElementById("play-pause2");
playButton.addEventListener("click", function a () {
if (video.paused == true) {
video.play();
playButton.innerHTML = "Pause";
} else {
video.pause();
playButton.innerHTML = "Play";
}
});
play.addEventListener("click", function c () {
if (video2.paused == true) {
video2.play();
play.innerHTML = "Pause";
} else {
video2.pause();
play.innerHTML = "Play";
}
});
HTML:
<video width="900px" height="600px" id="Digital_Poster.mp4" />
<source src="assets/video.mp4" type="video/mp4" id="video.mp4"/>
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause">Play</button>
</div>
<video width="900px" height="600px">
<source src="assets/video2.mp4" type="video/mp4" id="video2.mp4"/>
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause2">Play</button>
</div>
You should call .pause on the <video> elements, but the id is set on the <source> ones. Moving it to the <video> tags should make it work:
<video width="900px" height="600px" id="video.mp4">
<source src="assets/video.mp4" type="video/mp4" />
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause">Play</button>
</div>
<video width="900px" height="600px" id="video2.mp4">
<source src="assets/video2.mp4" type="video/mp4" />
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause2">Play</button>
</div>
By the way, I've corrected the /> to > in the first line. Also, declaring two elements with ID set to video-controls is illegal, consider using HTML classes (thanks #zer00ne for pointing out).
http://codepen.io/JTBennett/pen/vyJmBK
(Snippet below)
Hi - just wanting to allow the sounds to overlap with themselves as many times as they're clicked rather than waiting for the audio file to finish.
The string sounds overlap with each other just fine, but I don't know how to get the same sounds to overlap - if I press the E6 string three times, it's not triggering anything after the first click until the sound finishes.
$("#string-E1")
.mousedown(function() {
E1.play();
});
$("#string-B2")
.mousedown(function() {
B2.play();
});
$("#string-G3")
.mousedown(function() {
G3.play();
});
$("#string-D4")
.mousedown(function() {
D4.play();
});
$("#string-A5")
.mousedown(function() {
A5.play();
});
$("#string-E6")
.mousedown(function() {
E6.play();
});
body {margin:0;padding:0;}
.string {width:100%;text-align:center;border-top:2px #000 solid;border-bottom:2px #000 solid;margin:10px 0;background:#ccc;cursor:default;}
.string:hover {border-top:2px #f00 solid;border-bottom:2px #f00 solid;box-shadow:2px 0px 2px #666;}
.string:active {border-top:2px #fff solid;border-bottom:2px #fff solid;box-shadow:2px 0px 2px #666 inset;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tuner">
<div id="string-E1" class="string">E1</div>
<div id="string-B2" class="string">B2</div>
<div id="string-G3" class="string">G3</div>
<div id="string-D4" class="string">D4</div>
<div id="string-A5" class="string">A5</div>
<div id="string-E6" class="string">E6</div>
</div>
<audio id="E1" preload="auto">
<source src="https://www.electricherald.com/tuner/1-E.mp3"></source>
This browser does not support the HTML5 audio tag.
</audio>
<audio id="B2" preload="auto">
<source src="https://www.electricherald.com/tuner/2-B.mp3"></source>
This browser does not support the HTML5 audio tag.
</audio>
<audio id="G3" preload="auto">
<source src="https://www.electricherald.com/tuner/3-G.mp3"></source>
This browser does not support the HTML5 audio tag.
</audio>
<audio id="D4" preload="auto">
<source src="https://www.electricherald.com/tuner/4-D.mp3"></source>
This browser does not support the HTML5 audio tag.
</audio>
<audio id="A5" preload="auto">
<source src="https://www.electricherald.com/tuner/5-A.mp3"></source>
This browser does not support the HTML5 audio tag.
</audio>
<audio id="E6" preload="auto">
<source src="https://www.electricherald.com/tuner/6-E.mp3"></source>
This browser does not support the HTML5 audio tag.
</audio>
*Edit: The final version of the guitar tuner app is located here.
The only solution I see, is to create a new clone of the audio node and play it. That way the current playing audio nodes will stay, and the new ones will just overlap.
https://jsfiddle.net/cw8f67wp/
// function that will clone the audio node, and play it
function cloneAndPlay(audioNode) {
// the true parameter will tell the function to make a deep clone (cloning attributes as well)
var clone = audioNode.cloneNode(true);
clone.play();
}
$("#string-E1").mousedown(function() {
cloneAndPlay(E1);
});
$("#string-B2").mousedown(function() {
cloneAndPlay(B2);
});
$("#string-G3").mousedown(function() {
cloneAndPlay(G3);
});
$("#string-D4").mousedown(function() {
cloneAndPlay(D4);
});
$("#string-A5").mousedown(function() {
cloneAndPlay(A5);
});
$("#string-E6").mousedown(function() {
cloneAndPlay(E6);
});
I've got several HTML5 audio elements on a page and am using jQuery to play and pause them. The play and pause functions work appropriately, but the tracks can all be played at the same time.
How can I rewrite this code so that only one song can be played at a time? That is.. if one is playing and you click on another, pause the previous and play the most recent click.
Thank you!
HTML:
<div id="music_right">
<div class="thumbnail" id="paparazzi">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="danceinthedark">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="bornthisway">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
</div>
JavaScript: (that works, but plays/pauses individually)
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio').get(0);
if (song.paused)
song.play();
else
song.pause();
});
});
JavaScript: (ugly concept of mine)
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio').get(0);
if (song.paused)
song.play();
song.not($(this).pause();
else
song.pause();
});
});
var curPlaying;
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if(curPlaying) { $("audio", "#"+curPlaying)[0].pause(); }
if(song.paused) { song.play(); } else { song.pause(); }
curPlaying = $(this).parent()[0].id;
});
});
That should work.
EDIT:
var curPlaying;
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if(song.paused){
song.play();
if(curPlaying) $("audio", "#"+curPlaying)[0].pause();
} else { song.pause(); }
curPlaying = $(this).parent()[0].id;
});
});
This little function works for me. It stops all other audio elements playing on the page and lets the one that has been started keep playing. Here is a fiddle.
$("audio").on("play", function (me) {
jQuery('audio').each(function (i,e) {
if (e != me.currentTarget)
{
this.pause();
}
});
});