Posts Tagged 'Music'

March 7, 2013

Script Clip: HTML5 Audio Player with jQuery Controls

HTML5 and jQuery provide mind-blowing functionality. Projects that would have taken hours of development and hundreds of lines of code a few years ago can now be completed in about the time it'll take you to read this paragraph. If you wanted to add your own audio player on a web page in the past, what would it have involved? Complicated elements? Flash (*shudders*)? It was so complicated that most developers just linked to the audio file, and the user just downloaded the file to play it locally. With HTML5, an embedded, cross-browser audio player can be added to a page with five lines of code, and if you want to get really fancy, you can easily use jQuery to add some custom controls.

If you've read any of my previous blogs, you know that I love when I find little code snippets that make life as a web developer easier. My go-to tools in that pursuit are HTML5 and jQuery, so when I came across this audio player, I knew I had to share. There are some great jQuery plugins to play music files on a web page, but they can be major overkill for a simple application if you have to include comprehensive controls and themes. Sometimes you just want something simple without all of that overhead:

Oooh... Ahhh...

That song — Pop Bounce by SoftLayer's very own Chris Interrante — is written in five simple lines of HTML5 code:

<audio style="width:550px; margin: 0 auto; display:block;" controls>
  <source src="http://cdn.softlayer.com/innerlayer/Interrante-PopBounce.ogg" type="audio/ogg">
  <source src="http://cdn.softlayer.com/innerlayer/Interrante-PopBounce.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

If IE 9+, Chrome 6+, Firefox 3.6+, Safari 5+ and Opera 10+ would all agree on supported file formats for the <audio> tag, the code snippet would be even smaller. I completely geek out over it every time I look at it and remember the days of yore. As you can see, the HTML5 application has some simple default controls: Play, Pause, Scan to Time, etc. As a developers, I couldn't help but look for a to spice it up a little ... What if we want to fire an event when the user plays, pauses, stops or takes any other action with the audio file? jQuery!

Make sure your jQuery include is in the <head> of your page:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Now let's use jQuery to script separate "Play" and "Pause" links ... And let's have those links fire off an alert when they are pressed:

$(document).ready(function(){
  $("#play-button").click(function(){
   $("#audioplayer")[0].play();
   alert('You have played the audio file!');
  })    
 
  $("#pause-button").click(function(){
   $("#audioplayer")[0].pause();
   alert('You have paused the audio file!');
  })    
})

With that script in the <head> as well, the HTML on our page will look like this:

<div class=:"audioplayer">
  <audio id="audioplayer" name="audioplayer" controls loop>
    <source src="http://cdn.softlayer.com/innerlayer/Interrante-PopBounce.ogg" type="audio/ogg">
    <source src="http://cdn.softlayer.com/innerlayer/Interrante-PopBounce.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
  </audio>
 
  <a id="play-button" href="#">Play!</a>
  <a id="pause-button" href="#">Pause!</a>
</div>

Want proof that it works that simply? Boom.

You can theme it any way you like; you can add icons instead of the text ... The world is your oyster. The bonus is that you're using one of the lightest media players on the Internet! If you decide to get brave (or just more awesome), you can explore additional features. You're using jQuery, so your possibilities are nearly limitless. If you want to implement a "Stop" feature (which returns the audio back to the beginning when "Stop" is pressed), you can get creative:

$("#stop-button").click(function(){
    $("#audioplayer")[0].currentTime = 0; // return the audio file back to the beginning
}

If you want to include some volume controls, those can be added in a snap as well:

$("#volumeUp").click(function(){
    $("#audioplayer")[0].volume +=0.1;
}
 
$("#volumeDown").click(function(){
    $("#audioplayer")[0].volume -=0.1;
}

Try it out and let me know what you think. Your homework is to come up with some unique audio player functionality and share it here!

-Cassandra

July 7, 2011

Me and My Android

Last weekend I went to an outdoor concert where I saw a pretty decent Beatles tribute band that hails from the great state of Texas and goes by the name Me and My Monkey. The entire excursion from home to the venue and back again lasted just about six hours. I was pulling into my driveway engaged in a phone conversation with a friend about which fake Beatle was her favorite when my Android gave a strangled beep, cut us off and powered down.

At first I thought it was a glitch, but a quick attempt to turn it back on showed me otherwise. I was out of juice. My battery was drained beyond the point of no return — or at least no return without access to an electrical outlet. I wondered if I had forgotten to charge the phone the previous night. After all, I was outside with friends, food, and music all evening. My phone was snug in my pocket on standby ... Or was it?

I was the first to arrive to the venue, so I made a call to let the my freinds know I had staked us out a shady spot. After that, I fired up go sms to coordinate getting the right number of chairs, and I used it again while searching the parking lot for my friend's car to help her carry those chairs. During the Sgt. Pepper set in an attempt to settle an argument, I "Googled" which year the Beatles officially broke up (turns out it was 1970 but the break-up dragged out until 1975). Sometime between Strawberry Fields and Hello, Goodbye I got an email from the office, so I logged into my handy SoftLayer App to check on a support ticket.

During the intermission, a local radio station was piped through the sound system and someone asked me to Shazam what turned out to be a Florence and the Machine cover of a track off Abbey Road. Since my phone was at the ready, I was the point person to find out whether the chorus to I Am the Walrus really said goo goo g'joob. I didn't have a lighter on me, but my Virtual Zippo did the trick nicely during Hey Jude. And did I mention I don't wear a watch because if I just hit the power button on my spiffy smart phone ... ta-da, I get the time!

It's a funny feeling when you realize how something that didn't really exist five years ago has managed to ingrain itself so deeply into your everyday life. That's what I found myself thinking as I was drifting off to sleep Saturday night, me in my bed and my Android recharging on the night stand ... Well, that and who are the eggmen? Goo goo g'joob.

-William

Categories: 
January 2, 2008

Soft Rock

I remember when I figured out that I wanted to be different. My mother took me to see Elvis in concert a year before he died. I knew at that moment I wanted to be a part of something great.

Because of that concert I spent years learning how to play every musical instrument I could get my hands on.

Fast forward thirty something years later and I find myself working with my best friends to build the most innovative hosting company in the world.

I learned after many of my own concerts that it was "making a difference" and not a hit album that I was truly in love with. To steal a line from my favorite book, "I who knew not that I knew not, now know that I know not...and that's progress."

Not unlike the Beatles, SoftLayer is a phenomena that is larger than life. It's a culture. It's a way of life. It's how you do business. It's a necessity.

It is to be continued.....

I now know why Elvis left the building, it was to make room for SoftLayer.

-Chris

Categories: 
Subscribe to music