jQuery Audio: How to Allow Overlapping Sounds? - javascript

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);
});

Related

Json if else remove or hide class and add class [duplicate]

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');
});

how to get audio on clickeing the image using javascript and pause when playing two or more images one must pasued while other is playing [duplicate]

This question already has answers here:
Play sound file when image is clicked
(3 answers)
Closed 6 years ago.
<img class="cl"src="photo/198.jpg"/></br>
<audio class="cs" controls>
<source src="audio/198 banu nagamothu.mp3" type="audio/mpeg">
</audio>
I dont want controls to audio first but when i clicked the image audio should played using javascript and html
Use AudioElement.paused property!
$('.cl').click(function() {
var DOMElem = $('.cs').get(0);
DOMElem.paused ? DOMElem.play() : DOMElem.pause();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img class="cl" src="photo/198.jpg" />
</br>
<audio class="cs">
<source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
Try below code
$('.cl').click(function() {
if ($('.cs').paused == false) {
$('.cs').pause();
alert('pause');
} else {
$('.cs').play();
alert('play');
}
});

Play and pause audio onclick by js library

How can i play audio on my web (even for mobile) by Java script but just put Js code one times in .tpl file. I use NukeViet CMS, if i use the code below for each audio my web will hardly load.
var audioTagged = document.getElementById('audioID');
audioTagged.src = 'http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/straight.mp3';
audioTagged.load();
<p onclick="triggerAudio()"><img src="http://caicay.vn/uploads/news/loa.gif" /></p>
I want to put js code one times in header tag and for each audio i just insert code like this <span class="uba_audioButton" media-url="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/straight.mp3"></span> in editor.
I want to play audio code like http://www.tienganh123.com/tieng-anh-pho-thong-lop-8-bai-1/2604-vocabulary.html , the image hasn't to change when clicking on the bottom, just simply click-play then click-pause.
Use Audio class of JavaScript.
Check out this fiddle.
Here is the snippet.
function triggerAudio() {
var file = new Audio('http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/straight.mp3');
file.play();
}
<p onclick="triggerAudio()">
<img src="http://caicay.vn/uploads/news/loa.gif" />
</p>
According to the requirement mentioned in the comments by the OP, this might solve the problem.
Check out this updated fiddle.
Here is the snippet.
function triggerAudio(abc) {
var playid = abc.id.substring(4);
document.getElementById("audio" + playid).play();
}
audio {
display: none;
}
<p id="play1" onclick="triggerAudio(this)">
<img src="http://caicay.vn/uploads/news/loa.gif" />AFFECT</p>
<p id="play2" onclick="triggerAudio(this)">
<img src="http://caicay.vn/uploads/news/loa.gif" />ANNOY</p>
<p id="play3" onclick="triggerAudio(this)">
<img src="http://caicay.vn/uploads/news/loa.gif" />BALD</p>
<p id="play4" onclick="triggerAudio(this)">
<img src="http://caicay.vn/uploads/news/loa.gif" />BLOND</p>
<p id="play5" onclick="triggerAudio(this)">
<img src="http://caicay.vn/uploads/news/loa.gif" />CHARACTER</p>
<audio id="audio1">
<source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/affect.mp3" type="audio/mp3" />
</audio>
<audio id="audio2">
<source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/annoy.mp3" type="audio/mp3" />
</audio>
<audio id="audio3">
<source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/bald.mp3" type="audio/mp3" />
</audio>
<audio id="audio4">
<source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/blond.mp3" type="audio/mp3" />
</audio>
<audio id="audio5">
<source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/character.mp3" type="audio/mp3" />
</audio>
This solution contains very little Javascript which you don't need to write separately for every audio you want to play.
Add as much <audio> you need in the HTML part and this will still work for you.
If the CMS you are using do not allow onclick trigger, then you can register event listeners using javascript.
var elements = document.getElementsByTagName("p");
for(i = 0; i < elements.length; i++) {
elements[i].addEventListener("click", function() {
triggerAudio(this);
});
}
Here is the fiddle with event listeners registered using javascript.

How to stop HTML5 video?

I have a video in popup. When use below code on popup close, the video doesn't stop buffering and have the old video reference when reopen it. Here is the code:
HTML:
<div id="w_oPopup">
<div id="w_oPlayer">
<video id="w_oVideoFrame" autoplay loop controls tabindex="0" width="946" height="532" poster="">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
</div>
</div>
JS:
$('.w_cExitPopupButton').bind('click', onPopupBlockerClick);
function onPopupBlockerClick(e) {
$('#w_oPopupBlocker').hide();
//Here my tries...
$('#w_oVideoFrame')[0].pause();
$('#w_oVideoFrame')[0].src = "";
}
Try using the pause() method to stop the audio and set the audio path again and play. There is no stop() method to stop the video.
function stop_audio(){
$('#w_oVideoFrame')[0].pause();
$('#w_oVideoFrame')[0].src = " ";
}
function play_audio(){
$('#w_oVideoFrame')[0].src = "path of audio";
$('#w_oVideoFrame')[0].play();
}
use the currentTime on the selected video element
video.currentTime = 0;

Toggling audio on click?

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.

Categories

Resources