[HTML of Reconstructing Front-end Knowledge System] Changes brought by HTML5 to web page audio

introduction

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. However, now, it is estimated that some young developers do not need to understand what flash is. Because HTML5 came and it changed all that.

How HTML5 audio is played

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

Use plugins

A browser plug-in is a small computer program that extends the standard functionality of a browser.

Plugins can be added to pages object tag or the embed

embed

embed defines an external container for holding audio files such as MP3.

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

effect

Defect

The embed tag is invalid in HTML 4 because it is a new HTML5 tag
Depends on browser support
Installation of dependent plugins

obejct method

obejct can also define an external container to hold audio files such as MP3.

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

Effects

defect

Depends on browser support
Installation of dependent plugins

audio method

The audio tag is a tag specifically for audio in HTML5. Recommended Use!

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

effect

Defect

The embed tag is invalid in HTML 4 because it is a new HTML5 tag
Depends on browser support

best solution

There are three ways to use audio above, and some can be used in combination.

example

<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">
</audio>

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

effect

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

audio tag

properties of audio

Some commonly used audio properties, global properties are not listed here. For more information, please visit w3school .

Attributes	describe
autoplay	Sets or returns whether to play audio/video immediately after loading
controls	Sets or returns whether audio/video displays controls (such as play/pause, etc.)
loop	Sets or returns whether the audio/video should be replayed at the end
muted	Sets or returns whether audio/video is muted
preload	Sets or returns whether audio/video should be loaded after page load
src	Set or return the current source of the audio/video element

audio event

Events are an important weapon we use to interact with audio.

Also, only some events are given. For more information, please visit w3school .

event	describe
pause	When audio/video has been paused
play	When audio/video has started or is no longer paused
playing	When audio/video is ready after it has been paused or stopped due to buffering
canplay	When the browser can play audio/video
timeupdate	When the current playback position has been changed

Take the case of an audio player

After talking so much, isn't it just waiting for a case, come!

yards on!

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

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

        body {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: "微软雅黑"
        }

        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;
        }

       
    </style>

</head>

<body>
    <script>

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

    </script>

    <h1>audio音频播放demo</h1>

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

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

    

</body>

</html>

Summarize

Audio is indeed very common in today's web pages, and the way it is used has changed a lot. Write a demo case about audio later!

Refactoring the front-end knowledge system, do you want to work together?

Blog Description and Acknowledgments

Part of the information involved in the article comes from the Internet, which contains my own personal summary and opinions. The purpose of sharing is to build a community and consolidate myself.
If the cited information is infringing, please contact me to delete it!
Thanks to the almighty network, W3C, rookie tutorial, etc.!
Thanks to the industrious own , personal blog , GitHub learning , GitHub
The public number [Gui Zimo] , the applet [Zimo said]
If you feel that it is helpful to you, please give me a thumbs up and encouragement, and remember to collect the good text! Follow me to grow together!
Column: Reconstructing the front-end knowledge system (HTML)
Luckily I'm here, thank you for coming!

[HTML of Reconstructing Front-end Knowledge System] Changes brought by HTML5 to web page audio