README.md

README - Floating Audio Player

Adaptation of Dallas Morning News audio bug. Forked from @jdhancock88.

audio-bug.css

/*clearfix hack */
.clearFix:after {
  content: "";
  display: table;
  clear: both; }

.audioBug {
  position: fixed;
  bottom: 5%;
  width: 4rem;
  right: 5%;
  background-color: rgba(176,28,41, .8);
  border-radius: 2rem;
  height: 4rem;
  float: right;
  cursor: pointer;
  z-index: 100;
  transition: all .5s ease-out;
}

.expanded {
  width: 28rem;
}

.audioBug img {
  width: 30px;
  height: 30px;
  display: block;
  margin: .5rem .5rem 0 .5rem;
  float: left;
  transition: all .5s ease-out;
  cursor: pointer;
}

.audioBug img.bumper {
  margin: .5rem 0 0 1rem;
}

.audioBug h6 {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 1.2rem;
  color: white;
  line-height: 1.3rem;
  float: right;
  width: 24rem;
  margin-top: .5rem;
  padding-right: 1rem;
  display: none;
}

audio-bug.html

<div class="audioBug clearFix">
					<img class="audio" src="images/audio.svg" alt="Play audio" />
					<h6>LISTEN: Columbia&rsquo;s Country Caravan, featuring Lefty Frizzell (1951)</h6>
</div>

audio-bug.js

	var audioElement = document.createElement('audio');
        audioElement.setAttribute('src', 'http://res.dallasnews.com/interactives/country-dallas/audio/countryCaravan.mp3');
        audioElement.setAttribute('preload', 'auto');
        //audioElement.load()
        $.get();
        audioElement.addEventListener("load", function() {
        audioElement.play();
        }, true);

        // controls the playing of the audio

		$('.audioBug').click(function() {

        	if ($(this).hasClass('playing')) {
        		audioElement.pause();
        		$(this).removeClass('playing');
        	} else {
        		audioElement.play();
        		$(this).addClass('playing');
        	}
        });

		//hovering over the bug expands it to reveal the audio title. 

			$('.audioBug').hover(function() {
				$(this).addClass('expanded');
				setTimeout(function() {
					$('.audioBug > h6').fadeIn(500);	
				}, 600);
			}, function() {
				$('.audioBug > h6').fadeOut(500);
				setTimeout(function() {
					$('.audioBug').removeClass('expanded');
				}, 600)
			})


	
		// collapses the bug 5 seconds after loading
		function removeBumper() {
			setTimeout(function() {
				$('.audioBug > h6').fadeOut(500, function() {
					$('.audioBug').removeClass('expanded');
				})
			}, 5000)
		}


		//page loads, audio bug expands to reveal title, then collapses again
		setTimeout(function() {
			$('.audioBug').addClass('expanded');
		}, 2000);
		setTimeout(function() {
			$('.audioBug > h6').fadeIn(500, function() {
				removeBumper();
			})
		}, 2700);