» » Responsive HTML5 touchable audio player

 

Responsive HTML5 touchable audio player

Author: bamboo06 on 10-08-2015, 00:58, views: 2230

7
HTML5's audio provides audio playback, but the native style is not very nice looking, and each browser audio appears to show disunity. We can be a little package under the audio, you can achieve a response beautiful player style which can be touched.

HTML
<audio preload="auto" controls autoplay> 
    <source src="audio.wav" /> 
    <source src="audio.mp3" /> 
    <source src="audio.ogg" /> 
</audio> 

In fact, if only the above code, in support HTML5 browsers can properly display and play. And we need to do is to beautify the player, and make the appropriate packaging, so we refer to a jQuery plugin.

jQuery
First, we will effect the necessary CSS3 and jQuery render style file library files into.
<link rel="stylesheet" href="audioplayer.css" /> 
<script src="jquery.js"></script> 

Then, we call the player plug-in, look at the code:
<script src="audioplayer.min.js"></script> 
<script> 
$(function() {  
    $('audio').audioPlayer(); 
}); 
</script> 

Plug-in also provides the necessary operational option, users can set as the binding style, button language settings.
$('audio').audioPlayer({ 
    classPrefix: 'audioplayer', 
    strPlay: 'Play', 
    strPause: 'Pause', 
    strVolume: 'Volume' 
}); 

Here you can see a beautiful presentation as DEMO audio player up. There is a problem that we know some older browsers do not support html5, such as IE8 and below, and firefox does not support mp3, particularly sources we generally offer few ogg format, then how do we solve the compatibility problems it? There are good programs that do not support the use of flash to play on html5 browsers, like a lot of this scheme is to use the online audition site.

Category: Javascript / CSS / HTML5

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
23 March 2017 05:53

asdf

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
<
  • 0 Comments
  • 0 Articles
17 August 2017 18:21

Stephanie Hansen

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Responsive HTML5 touchable audio player is an excellent tool which works really good as shared by rushmyessay. Indeed I agree the native style is not very nice looking, great post shared on this site much appreciated.

<
  • 0 Comments
  • 0 Articles
19 September 2017 21:33

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
On this page you can read my interests, write something special. EZ Battery Reconditioning

Mmm.. estimable to be here in your report or notify, whatever, I repute I should moreover process strong for my have website want I play some salubrious further updated busy in your location. Exercise Fat Burn

<
  • 0 Comments
  • 0 Articles
20 September 2017 06:39

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I prefer merely excellent resources - you will see these people in: Serious Questions

<
  • 0 Comments
  • 0 Articles
22 December 2017 23:27

Lemis

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Though i am not good at writing scripts for development but i have gaming passion and hopefully some articles on paperbagkits.com would help you a lot because writing is an art and it needs lot of time for modification and improvement.

<
  • 0 Comments
  • 0 Articles
25 January 2018 19:21

Aalin

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
We viewed at a distance your website seeing as With regards to through listened to a lot of based on a persons content. Preventivo ristrutturazione

<
  • 0 Comments
  • 0 Articles
21 February 2018 17:42

kabali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
police job is really a tideous job its worst part is that you can't enjoy your festival because of it. People enjoy their life while police stand in the line. Even aadhar card is also taken away from them which seems to much for anyone. I believe they should also be given a leave just like others instead of giving them aadhar card.

Information
Comment on the news site is possible only within (days) days from the date of publication.