A brief talk on how to use H5 to realize audio playback

White Wolf Source: Http://www.manks.top/article/h5_audio This article copyright belongs to the author, welcome reprint, but without the consent of the author must retain this paragraph statement, and in the article page obvious location to the original link, otherwise reserves the right to pursue legal responsibility.

How do I play audio on a webpage? The topic is very tall, actually the development work really is very easy, only need to use HTML5 's one label audio can.

Most of the audio on a Web page is usually played through the plugin Falsh. However, not all browsers support it.

HTML5 specifies a standard way to include audio through the sound element.

Audio formats and specific details that are currently supported by audio can be consulted in the standard. In this article we take a look at the specific implementations and some have to deal with.

Let's start with a simple implementation that plays a single voice.

Html

<button class= "BTN Audio" >    play voice    <audio src= "sound Address" ></audio></button>

　　

Javascript

function () {    var $ this = $ (this),        = $this. Find ("audio");    $audio. Get (0). Play ();});

Yes, you're not mistaken, it's that simple.

However, imagine that we are now the scene is similar to the Chat page, a page probably has more than one play voice button, but also with the above code implementation, you can play a try.

The audio you click will be played at the same time as expected.

This is obviously not what we want. Our current implementation is to mark a playback state, play any one of the audio before judging the state, if the status display is playing, just pause it, and then play the new audio.

Let's take a look at concrete implementations.

varplaying =false, Currentaudio =NULL;$(". Audio"). On ("click",function () {    var$audio = $ ( This). Find ("audio"); if(playing) {playing=false;        Currentaudio.pause (); Currentaudio.currenttime= 0; Currentaudio=NULL; } Playing=true; Currentaudio= $audio. Get (0); Currentaudio.play ();});

This time, in the multi-audio state to achieve a single audio playback of the problem of non-conflict.

The problem is always so many, the sharp contradiction also comes with it.

Open Firebug, we switch to the network bar to see, in fact, our multiple audio on the page is also loaded, so that users open our web page will be very time-consuming, in the case of poor network performance estimates will be worse.

Let's take a look at how to optimize without compromising the effect.

①, we have optimized audio and the actual playback address is stored with attributes

②, so we need to simply modify the JavaScript code to

Take a look at the concrete implementation

Html

<Buttonclass= "BTN Audio">Play Voice<Audiodata-src= "Audio Address"></Audio></Button><Buttonclass= "BTN Audio">Play Voice<Audiodata-src= "Audio Address"></Audio></Button>

Javascript

varplaying =false, Currentaudio =NULL;$(". Audio"). On ("click",function () {    var$audio = $ ( This). Find ("audio"); $audio. attr ("src", $audio. Data ("src"))); if(playing) {playing=false;        Currentaudio.pause (); Currentaudio.currenttime= 0; Currentaudio=NULL; } Playing=true; Currentaudio= $audio. Get (0); Currentaudio.play ();});

Simply put, we only add a line $audio.attr("src", $audio.data("src")); of code for the playback we are going to load after the click.

We open firebug-network verification, it is really a click before loading, so as to achieve our optimization effect.

Have a small partner want to ask, I want to achieve like Baidu MP3 play, there is play Countdown. Because it does not belong to our topic, the detailed implementation can refer to the W3caudio property currenttime

A brief talk on how to use H5 to realize audio playback