[HTML of reconstructing front-end knowledge system] changes brought by HTML5 to web page audio

[HTML of reconstructing front-end knowledge system] changes brought by HTML5 to web page audio


I believe everyone is familiar with music playback, but long before the previous music playback, your browser will ask you whether to download the flash plug-in. Now, however, it is estimated that some young developers don't need to know what flash is. Because HTML5 came, it changed all this.

Playing mode of HTML5 audio

Yes, HTML5 brings more than one way to play audio.

Using plug-ins

Browser plug-in is a small computer program that extends the standard functions of browser.

Plug ins can be added to the page using the object tag or the embed ded tag.

Embedded mode

embed defines an external container to hold MP3 and other audio files.

for example

<embed height="50" width="100" src="demo.mp3">



  • Because it is invalid in HTML tag embed ded in HTML 4
  • Browser dependent support
  • Installation of dependent plug-ins

obejct mode

obejct can also define an external container to hold MP3 and other audio files.

for example

<object height="50" width="100" src="demo.mp3"></object>



  • Browser dependent support
  • Installation of dependent plug-ins

audio mode

Audio tag is a tag specially designed for audio in HTML5. Recommended!

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



  • The embed ded tag is not valid in HTML 4 because it is a new tag in HTML5

  • Browser dependent support

Best solution

The above describes three ways to use audio, which can be combined.


<audio controls height="100" width="100">
  <source src="demo.mp3" type="audio/mpeg">
  <source src="demo.ogg" type="audio/ogg">
  <embed height="50" width="100" src="demo.mp3">


Seeing that the above three tags are used, the advantage of this is that audio will try to play audio with mp3 or ogg. If the playback fails, it will fall back to embed ded.


The display effect is basically the same as that of audio!

audio tag

Properties of audio

Some common audio attributes and global attributes are not listed here. More please w3school Consult.




Sets or returns whether to play audio / video immediately after loading


Set or return whether the audio / video display controls (such as play / pause, etc.)


Sets or returns whether the audio / video should be replayed at the end


Sets or returns whether audio / video is muted


Sets or returns whether the audio / video should be loaded after the page is loaded


Sets or returns the current source of the audio / video element

audio events

Event is an important weapon we use to interact with audio.

Similarly, only some events are given, please go to w3school Consult.




When audio / video is paused


When audio / video has started or is no longer paused


When the audio / video is ready after it has been paused or stopped due to buffering


When the browser can play audio / video


When the current playback position has been changed

A case of audio player

After talking so much, don't you just wait for a case? Come on!

Code up!

<!doctype html>
<html lang="en">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0" />
    <title>audio audio frequency demo</title>
        * {
            margin: 0;
            padding: 0;

        body {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: "Microsoft YaHei "

        h1 {
            width: 100%;
            font-size: 1.5em;
            text-align: center;
            line-height: 3em;
            color: #33942a;

        #audio {
            width: 100%;

        .control-body {
            display: flex;
            align-items: center;
            justify-content: center;

        #control {
            width: 150px;
            height: 150px;
            border-radius: 200px;
            border: none;
            box-shadow: #888 0 0 8px;




        function play() {
            let audio = document.getElementById("audio");
            if (audio.paused) {
            } else {


    <h1>audio Audio playback demo</h1>

    <div class="control-body">
        <button class="control" id="control" onclick="play()">start</button>

    <audio id="audio" src="http://96.ierge.cn/15/235/471737.mp3"></audio>





Audio is indeed very common in today's web pages, and the way of use has changed greatly. Follow up to write a demo case about audio!

Reconstruct the front-end knowledge system. Do you want to work together?

Blog description and thanks

Some of the materials involved in this article are collected from the Internet, including my personal summary and views. The purpose of sharing is to build a community and consolidate myself.

If there is infringement on the quoted materials, please contact me to delete!

Thanks to universal network, W3C, rookie tutorial and so on!

Thank you for your hard work ownPersonal blogGitHub learningGitHub

official account [] , applet [Zi Mo said]

If you feel helpful to you, you might as well give me some praise and encouragement. Remember to collect good articles! Pay attention to me and grow together!

Column: Refactoring front-end knowledge system (HTML)

Luckily I'm here. Thank you for coming!

Keywords: Javascript Front-end ECMAScript html

Added by kausee on Wed, 02 Mar 2022 07:02:06 +0200