CODEWITHSUNDEEP
javascripthtml
user7310550
user7310550

Reputation:

Working with audio files

When a button is playing the audio i want all of the other buttons to pause. Also i want the buttons to restart if they get pressed twice. Is there anyway of doing that without only using javascript? 

<div id="sound" class="text-center">
<a onclick="this.firstChild.play()" class="btn b"><audio src="https://archive.org/download/LastChristmas_614/Wham-LastChristmas.mp3" id="audio1"></audio><i class="fa fa-file-audio-o" aria-hidden="true"></i></a>
<a onclick="this.firstChild.play()" class="btn c"><audio src="http://www.memory-of.com/uploads/backgroundmusics/bgmusic-75155-634263906597120000.mp3" id="audio6"></audio><i class="fa fa-file-audio-o" aria-hidden="true"></i></a>
<a onclick="this.firstChild.play()" class="btn d"><audio src="http://s3.amazonaws.com/puresolo-production/assets/1951/Santa_Baby.mp3" class="audio5"></audio><i class="fa fa-file-audio-o" aria-hidden="true"></i></a>
<a onclick="this.firstChild.play()" class="btn e"><audio src="http://a.tumblr.com/tumblr_lwcu7k22YT1r0mybjo1.mp3" id="audio4"></audio><i class="fa fa-file-audio-o" aria-hidden="true"></i></a>
<a onclick="this.firstChild.play()" class="btn a"><audio src="http://a.tumblr.com/tumblr_mehj3cVKqV1qm6fdbo1.mp3" id="audio3"></audio><i class="fa fa-file-audio-o" aria-hidden="true"></i></a>
<a onclick="this.firstChild.play()" class="btn f"><audio src="http://dopefile.pk/mp3embed-zqi2ez7kf6dh.mp3" id="audio2"></audio><i class="fa fa-file-audio-o" aria-hidden="true"></i></a>

https://codepen.io/evan17gr/pen/bBOaBy

Thank you!

Upvotes: 1

Views: 77

Answers (1)

Vinay
Vinay

Reputation: 7674

Change your start of anchor tags like this assign click and dblclick handlers passing this reference

<a onclick="clkHandle(this)" ondblclick="dblclkHandle(this)"...........

These will handle the events

function clkHandle(t)
{
  $(this).siblings().find('audio').each(function(){
    this.pause();
  }
  t.firstChild.paused ? t.firstChild.play() : t.firstChild.pause();
}

function dblclkHandle(t)
{ 
  t.firstChild.currentTime = 0;
}

Upvotes: 1

Related Questions