HTML5 Audio(audio)

The audio function of HTML5 is already very powerful. Playback, jump, buffering and other functions that could only be achieved with flash in the past can be easily handled by HTML5 audio.

But until now, there was still no standard aimed at playing audio on web pages.

Audio’s syntax and properties and methods

Using syntax
< audio src="song.mp3" controls="controls" loop="loop" autoplay="autoplay"> Dear, your browser does not support the audio tag of html5</audio>
Attribute
src is the path of the song
controls Playback control If you write controls="controls" in the tag, the web page will display the playback controls that come with audio. If not written, it will not be displayed.
loop The song loop is in the tag Add this attribute to song loop. If your songs are retrieved from the background, you can also set loop=true/false in ajax to control it;
autoplay When the song is loaded, it will automatically play, but only the PC side can implement the mobile side No (PC browsers are much more complete than mobile browsers, and support for some attributes will be much better)
The above are attributes within tags, of course they can also be used as object attributes to call and control aido.*

Audio is not only a label, it is also an object under the window. The object has properties and methods. As an object, what are its commonly used methods?

Object properties:
currentTime Get the current playback time
duration Get the total time of the song
play Returns true/false whether it is playing
pause Returns true/false whether it is paused
Object method:
play() Play the song
pause() Pause the song
load() reloads songs

Three basic formats in HTML5:

1. Minimal code

<audio src="song.ogg" controls="controls"></audio>

2. Code with incompatibility reminder

<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

3. Try to be compatible with browser writing

<audio controls="controls">
<source src="song.ogg" type="audio/ogg" >
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

<!doctype html>
<html>
    <head> 
    <meta charset="utf-8"> 
    <title>php.cn</title> 
    </head>
    <body>
        <audio controls>
           <source src="horse.ogg" type="audio/ogg">
           <source src="horse.mp3" type="audio/mpeg">
             您的浏览器不支持 audio 元素。
        </audio>
    </body>
</html>

Continuing Learning

new file

<!Doctype html> <html> <head> <title>HTML5多媒体</title> <meta charset="utf-8"/> <script> function onInputFileChange() { var file = document.getElementById('file').files[0]; var url = URL.createObjectURL(file); console.log(url); document.getElementById("audio_id").src = url; } </script> </head> <body> <input type="file" id="file" onchange="onInputFileChange()"> <audio id="audio_id" controls autoplay loop>Your browser can't support HTML5 Audio</audio> </body> </html>

submit Reset Code

Automatic operation

HTML5 Audio(audio)

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]