[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.
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">
effect
defect
- 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>
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.
Examples
<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
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.
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. More please 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 to universal network, W3C, rookie tutorial and so on!
Thank you for your hard work own，Personal blog，GitHub learning，GitHub
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!