• HTML Audio Player Buttons

  • HTML 5 is able to play audio in a browser without the need for a plugin. In the long run, HTML 5 will probably put an end to audio-plugins such as Microsoft Windows Media Player, Silverlight and Adobe Flash.

    The download provided here consists of Javascript and css that give a customised version of the HTML 5 audio. You may use it as is on a web page or you may want to modify it to show a different image.

    This code is also used in the PHP-eSeller application for audio previews.

    Click here to download

  • An example of the audio player


    Open Bottle Audio Clip

     

    Make Coffee Audio Clip
  • Description

    This is an example of the audio player. Note that you need the font-awesome css and the JQuery files as well as the small Javascript file.

    In the JavaScript file clip.js the images for the buttons are defined by:

    var playingString = "<i class='fa fa-pause' aria-hidden='true'></i>";
    var pausedString = "<i class='fa fa-play' aria-hidden='true'></i>";

    The following is the full page example:


    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Minimum Requirements for XootBox JokeBox</title>

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    rel="stylesheet" text="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"
    type="text/javascript"></script>
    <script src="js/clip.js" type="text/javascript"></script>

    </head>
    <body>
    <audio id="myAudio"></audio>

    <div class="mp3Player" data-src="https://www.withinweb.com/demographics/mp3clips/mp3_01.mp3" data-pos="0">
    <button class="btnPlayPause button"></button>
    <span class="infoLabel">Open Bottle Audio Clip</span>
    </div>

    </body>
    </html>