[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. Now, however, it is estimated that some young developers don't need to know what flash is. Because HTML5 came, it changed all this.
HTML5 audio playback mode
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.
The plug-in can use the object tag or embed ded tag to add to the page.
Embedded mode
embed defines an external container to hold MP3 and other audio files.
for example
<embed height="50" width="100" src="demo.mp3">
effect
defect
- The embed ded tag is not valid in HTML 4 because it is a new tag in HTML5
- 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>
effect
defect
- 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>
effect
defect
- 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.
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>
explain
See 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.
effect
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. For more, please go to w3school Consult.
| attribute | describe |
|---|---|
| autoplay | Sets or returns whether to play audio / video immediately after loading |
| controls | Set or return whether the audio / video display 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 the audio / video should be loaded after the page is loaded |
| src | 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.
| event | describe |
|---|---|
| pause | When audio / video is paused |
| play | When audio / video has started or is no longer paused |
| playing | When the 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 |
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">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0" />
<title>audio audio frequency demo</title>
<style>
* {
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;
}
</style>
</head>
<body>
<script>
function play() {
let audio = document.getElementById("audio");
if (audio.paused) {
audio.pasue();
} else {
audio.play();
}
}
</script>
<h1>audio Audio playback demo</h1>
<div class="control-body">
<button class="control" id="control" onclick="play()">start</button>
</div>
<audio id="audio" src="http://96.ierge.cn/15/235/471737.mp3"></audio>
</body>
</html>summary
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 for the universal network, W3C, rookie tutorial and so on!
Thank you for your hard work own，Personal blog，GitHub learning，GitHub
official account [Guizi Mo] , 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!