PHP-eSeller

HTML 5 Audio

Email :

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>";

 


<!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>

 

 

 


Find out more

Pricing : PHP-eSeller costs $55 U.S. Dollars.
Purchase page.

Demo : View an on-line demo illustrating the admin pages and store front.
Demo page

Enquiries : If you have any questions about the product, go to the contacts page.
Contacts page

Showcase : To see how customers have used the application, go to the user sites page.
User sites