Js Audio

by abogoud

HTML

<script src="https://osvaldas.info/examples/audio-player-responsive-and-touch-friendly/audioplayer.js"></script>
<audio preload="auto" controls loop>
		<source src="https://s3.amazonaws.com/assets.chirpdaily.com/BEATS/19th+Ave+-+Chirp+Daily+-+96bpm.mp3" />
</audio>
<br/><br/>
<audio preload="auto" controls loop>
		<source src="https://s3.amazonaws.com/assets.chirpdaily.com/BEATS/Breakbot+-+Zeed+-+72bpm.mp3" />
</audio>

<br/><br/>
<audio preload="auto" controls loop>
		<source src="https://s3.amazonaws.com/assets.chirpdaily.com/BEATS/19th+Ave+-+Chirp+Daily+-+96bpm.mp3" />
</audio>
<br/><br/>
<audio preload="auto" controls loop>
		<source src="https://s3.amazonaws.com/assets.chirpdaily.com/BEATS/Breakbot+-+Zeed+-+72bpm.mp3" />
</audio>
<br/><br/>
<audio preload="auto" controls loop>
		<source src="https://s3.amazonaws.com/assets.chirpdaily.com/BEATS/19th+Ave+-+Chirp+Daily+-+96bpm.mp3" />
</audio>
<br/><br/>
<audio preload="auto" controls loop>
		<source src="https://s3.amazonaws.com/assets.chirpdaily.com/BEATS/Breakbot+-+Zeed+-+72bpm.mp3" />
</audio>

CSS

/*
			PLAYER
		*/

		.audioplayer
		{
			height: 2.5em; /* 40 */
			color: #fff;
			text-shadow: 1px 1px 0 #000;
			border: 1px solid #222;
			position: relative;
			z-index: 1;
			background: #333;
		}


			/* mini mode (fallback) */

			.audioplayer-mini
			{
				width: 2.5em; /* 40 */
				margin: 0 auto;
			}


			/* player elements: play/pause and volume buttons, played/duration timers, progress bar of loaded/played */

			.audioplayer > div
			{
				position: absolute;
			}


			/* play/pause button */

			.audioplayer-playpause
			{
				width: 2.5em; /* 40 */
				height: 100%;
				text-align: left;
				text-indent: -9999px;
				cursor: pointer;
				z-index: 2;
				top: 0;
				left: 0;
			}
				.audioplayer:not(.audioplayer-mini) .audioplayer-playpause
				{
					border-right: 1px solid #555;
					border-right-color: rgba( 255, 255, 255, .1 );
				}
				.audioplayer-mini .audioplayer-playpause
				{
					width: 100%;
				}
				.audioplayer-playpause:hover,
				.audioplayer-playpause:focus
				{
					background-color: #222;
				}
				.audioplayer-playpause a
				{
					display: block;
				}
				.audioplayer-stopped .audioplayer-playpause a
				{
					width: 0;
					height: 0;
					border: 0.5em solid transparent; /* 8 */
					border-right: none;
					border-left-color: #fff;
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					margin: -0.5em 0 0 -0.25em; /* 8 4 */
				}
				.audioplayer-playing .audioplayer-playpause a
				{
					width: 0.75em; /* 12 */
					height: 0.75em; /* 12 */
					position: absolute;
					top: 50%;
					left: 50%;
					margin: -0.375em 0 0 -0.375em; /* 6 */
				}
					.audioplayer-playing .audioplayer-playpause a:before,
					.audioplayer-playing .audioplayer-playpause a:after
					{
						width: 40%;
						height: 100%;
						background-color: #fff;
						content: '';
						position: absolute;
						top: 0;
					}
					.audioplayer-playing .audioplayer-playpause a:before
					{
						left:...

JavaScript

document.addEventListener('play', function(e){
    // get all <audio> tag elements in the page.
    var allAudios = document.getElementsByTagName('audio');
    // Iterate through all players and pause them, except for
    // the one who fired the "play" event ("target")
    for(var i = 0; i<allAudios.length; i++){
        if(allAudios[i] != e.target){
            allAudios[i].pause();
        }
    }
}, true);