HTML5 uses JavaScript to control <audio> audio playback

Source: Internet
Author: User

1, here is a simple example of playing music

(The Controls property tells the browser to have a basic playback control)
Original: HTML5-use <audio> play audio


<audio src= "Hangge.mp3" controls></audio>

2, preload media files

Set preload different property values to tell the browser how to load a media file:
(1) The value is auto: Let the browser automatically download the entire file
(2) The value is none: The browser does not have to download files beforehand
(3) The value is metadata: Let the browser first get the data block at the beginning of the audio file, thus sufficient to determine some basic information (such as the total length of audio)

<!--users click to play before they start downloading-->
<audio src= "Hangge.mp3" Controls preload= "None" ></audio>

3, Auto Play

Use the AutoPlay property to play the browser immediately after it finishes loading the audio file. (If you want to use it as a background music, you can remove the controls attribute)

<audio src= "Hangge.mp3" Controls autoplay></audio>

4, Loop playback

Use the Loop property to play at the beginning of the music playback at the end.

<audio src= "Hangge.mp3" Controls loop></audio>

Sometimes we need to use JS to control the player to achieve music playback, pause. Or use JS to play some sound effects.

1, using JavaScript to control the player on the page

For example, add a <audio> to the page to play the background music (because the controls property is not set, we can not see the playback interface)

<audio id= "Bgmusic" >
<source = src= "Hangge.mp3" type= "Audio/mp3" >
<source = src= "Hangge.ogg" type= "Audio/ogg" >
</audio>

The pause () and Play () methods allow music to pause and resume (combined with the CurrentTime property to stop and replay)

var audio = document.getElementById ("Bgmusic");

Play (Resume playback)
Audio.play ();

Time out
Audio.pause ();

Stop it
Audio.pause ();
Audio.currenttime = 0;

Play again
Audio.currenttime = 0;
Audio.play ();

2, you can also dynamically create <audio> elements

Mode 1
var audio = document.createelement ("audio");
AUDIO.SRC = "Hangge.mp3";
Audio.play ();

Mode 2
var audio = new Audio ("Hangge.mp3");
Audio.play ();

The Canplaytype () method allows you to determine which encoding the browser supports, setting up the corresponding audio file.

if (Audio.canplaytype ("Audio/mp3")) {
AUDIO.SRC = "Hangge.mp3";
}else if (Audio.canplaytype ("Audio/ogg")) {
AUDIO.SRC = "Hangge.ogg";
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.