Audioplayer.js, a responsive and touch-enabled jquery audio plugin

The audioplayer.js is a responsive, touch-enabled HTML5 music player. This article is the official website of the description of the document to be translated, bloggers for the first time translation of foreign languages. Please understand the place where you are not.

JS file Address: Http://osvaldas.info/examples/audio-player-responsive-and-touch-friendly/audioplayer.js

You can right-click on the address above and choose Save As to save the JS file to local.

English Original address: http://osvaldas.info/audio-player-responsive-and-touch-friendly

Audio Player: Responsive and touch-enabled operation

A few months ago, I made a jquery plugin that replaced the <audio> tag with custom HTML code. By writing some CSS you can get a brand new, personalized and powerful player with the same functionality and defaults. There is no way to directly modify the style of an element. However, the elements in the HTML5 document model have methods, properties, and events that can be easily implemented. Translated by Dragondean, starting with the code Nong private plots

To summarize, this plugin is a style that allows you to customize styles <audio> elements. That's why I made this plugin. I hope the player can adapt to the subject of a project in front of me (commercial IP phone-voip). The audio element provides IVR (interactive voice response) functionality that allows customers to create their own sound responder/menu, record and play back audio.

A few weeks ago, I wrote an in-depth article about the plugin for codrops, and I recommend it to people who have less experience in this field. Received some very helpful feedback to help me improve this player. Obviously, this is not the end, and I hope to receive your feedback here as well. Translated by Dragondean, starting with the code Nong private plots

Characteristics

Before deciding to make this plugin myself, I did some small research on the available options. I have clear and strict requirements: (1) must be lightweight, customizable, and correct. (2) must be able to solve the current problems, such as responsive, touch-enabled operation. (3) must solve the problem that I have not solved at present. However, no one is filtered through. Actually, the point is, I did this. This player is:

The response type

To meet this requirement, all the responsibilities are in your CSS. My example is responsive, you can also do a non-responsive, although I do not recommend doing so. Responsiveness is a sign of a good web experience.

Touch-able Operation

Support for touch operations is also a sign of a good web experience. With these two items you are separated from the device and the screen. The work is half done.

Self-adapting

When the browser does not support the audio element or sound file at all, the player automatically changes to a single button based on a third-party plug-in player (basically a QuickTime on Mac, Windows Media Player on Windows) (only play/ Pause button) <embed/> elements to play because of the file. Another scenario is a browser that does not support JavaScript. The browser's default player is then called. It's good, too.

of the native

There is no way the player can be directly native. The plug-in supports the audio element's properties (Src,autoplay,loop,preload) and tags (<sorce>). Based on these points, the "AutoPlay" and "loop" attribute inheritance Yihaodian refer to the situation.

Practical and

Key play/pause and playback progress controls, switches, add and subtract controls, and audio loading progress (caching).

No diagram

This also depends on your CSS, I do the player completely using CSS, a picture file is not used. The EM element is used to do this and to change the size. Allows the player to scale and stretch.

No flash

Bye, Flash. I don't need you right now.

The lightweight

The compressed version of the plugin is only 4KB in size.

How to use

Add an audio element, set the properties you want, and add resources. The more resources you add, the more users will be able to hear your audio (since there is no audio format to support all Liula you). Translated by Dragondean, starting with the code Nong private plots

Three examples:

<src= "Audio.wav"  preload= "Auto"  controls> </audio>

This only loads the Audio.wav file and does not play until the play button is clicked. Another load value (none,metadata) does not load the file.

Automatically looping files after loading can be used this way:

<src= "Audio.wav"  preload= "Auto"  controls AutoPlay Loop  ></audio>

Specify multiple audio formats to resolve previously mentioned issues (translator Note: No one audio file supports all browsers):,

<Audiopreload= "Auto"Controls>    <Sourcesrc= "Audio.wav" />    <Sourcesrc= "Audio.mp3" />    <Sourcesrc= "Audio.ogg" /></Audio>

A mysterious control? This is a Boolean property that does not affect the plug-in in any way, but ensures that the browser's default player is displayed and the control is displayed when JavaScript is not supported.

Last step-Call the plugin on the audio element (if you have not previously introduced jquery and plug-in files, introduce them first):

<Audiosrc= "Audio.wav"preload= "Auto"Controls></Audio><Scriptsrc= "Jquery.js"></Script><Scriptsrc= "Audioplayer.js"></Script><Script>    $( function()    {        $( 'Audio'). Audioplayer (); });</Script>

The plugin has some optional parameters. The most important thing is classprefix. The passed value becomes the class prefix name of the parent element's class name and child element. Other parameters may be beneficial only to non-English. Give a default worth example:

$ (' audio '). Audioplayer ({    classprefix: ' Audioplayer ',    strplay: ' Play ',    strpause: ' Pause ',    Strvolume: ' Volume '});

Html

At the beginning of the first paragraph, when the plugin is called, the audio roundness is replaced by some HTML:

<Divclass= "Audioplayer audioplayer-stopped">    <Audiosrc= "Audio.wav"preload= "Auto"Controls></Audio>    <Divclass= "Audioplayer-playpause"title= "Play"><ahref="#">Play</a></Div>    <Divclass= "Audioplayer-time audioplayer-time-current">00:00</Div>    <Divclass= "Audioplayer-bar">        <Divclass= "audioplayer-bar-loaded"></Div>        <Divclass= "Audioplayer-bar-played"></Div>    </Div>    <Divclass= "Audioplayer-time audioplayer-time-duration">&hellip;</Div>    <Divclass= "Audioplayer-volume">        <Divclass= "Audioplayer-volume-button"title= "Volume"><ahref="#">Volume</a></Div>        <Divclass= "Audioplayer-volume-adjust"><Div><Div></Div></Div></Div>    </Div></Div>

Some classes are assigned to the parent element when the following conditions occur:

• When player is playing-audio is playing

<class= "Audioplayer audioplayer-playing">

• Player stop-audio playback has stopped

<class= "Audioplayer audioplayer-stopped">

• Player mute-sound mute status

<class= "Audioplayer audioplayer-muted">

• Player does not have volume-volume adjustment is not available:

<class= "Audioplayer audioplayer-novolume">

Note: when the browser does not support the audio element or does not support the given sound file, the player transitions to minimized mode, showing only the player's Play/pause button (because the EMBED element is restricted in operation):

<Divclass= "Audioplayer audioplayer-stopped audioplayer-mini">    <Embedsrc= "Audio.wav"width= "0"Height= "0"Volume= "+"autostart= "false"Loop= "false" />    <Divclass= "Audioplayer-playpause"title= "Play"><ahref="#">Play</a></Div></Div>

tip: using the Classprefix parameter when the plugin is initialized , you can replace each audio player's appearance with your own values in HTML, so that you can have multiple multimedia players in a Web site with different appearances.

Now it all depends on how you use CSS to define your player style. I'm going to skip this section, just for example, you can always check out my article on Codrops on how to define the style. Translated by Dragondean, starting with the code Nong private plots

Demo:

As mentioned many times before, my player is responsive and doesn't even rely on media queries. I have an arrangement to explain the layout:

The parent element . Audioplayer is position:relative; audioplayer-* is position:absolute;

Demo link : http://osvaldas.info/examples/audio-player-responsive-and-touch-friendly/(Translator note: Because it is a foreign site, Load time may be a little bit longer)

Get Audioplayer.js (Uncompressed version: 8KB), Audioplayer.min.js (compressed version; 4KB).

This article by Dragondean translation, starting in the code Nong private plots, reproduced please indicate the source!