Analysis of audio (audio) in html5

The content shared with you in this article is about the analysis of audio (audio) in HTML5. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Using html5 audio background

Until now, there was still no standard that aimed at playing audio on web pages. Today, most audio is played through plug-ins such as Flash. However, not all browsers have the same plugins. HTML5 specifies a standard way to include audio through the audio element, which can play a sound file or audio stream.

Audio format

Currently, the audio element supports three audio formats: Ogg Vorbis, Mp3, and Wav. This is the audio format browser support is as follows:

Audio format	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	#√		√

##Use the audio element Implement audio playback

The controls attribute of the audio element is used to add play, pause and volume controls. The content inserted between is for browsers that do not support the audio element. As shown, the source element can link different audio files to solve the problem of browser compatibility with audio formats. Two source elements are used below to enable the above five browsers to play the audio. The simple code is as follows:

<audio controls="controls">该浏览器不支持该格式音频的播放    
<source src="../videoAudio/1.mp3"></source>
<source src="../videoAudio/1.wav"></source>
</audio>

Use Dom to operate audio

Use custom buttons to implement the play and pause functions of the controls attribute. The code is as follows:

<button onclick="controlPlay()">播放/停止</button>
        <audio id="vioce" >该浏览器不支持该格式音频的播放
            <source src="../videoAudio/1.mp3"></source>
            <source src="../videoAudio/1.wav"></source>
        </audio>
        <script>
            var voice =document.getElementById("vioce");
            function controlPlay(){
                if(voice.paused){//判断是否停止了
                    voice.play();//播放
                } else{
                    voice.pause();//停止
                }
            }
        </script>

Audio format conversion (convert Wav format to MP3 format)

1. First download ffmpeg, enter the URL www.ffmpeg.org (open source URL), enter windows to download the windows version of the file.

2. Decompress the ffmpeg compressed file (take ffmpeg-20180803-5aeb3b0-win32-static.zip as an example), and add the path to the ffmpegbin directory to the environment variable path (G:\mydeveloperapplication\hbuilder\html5\ffmpeg -20180803-5aeb3b0-win32-static\bin).

3. After setting the environment variables, type ffmpeg in the DOS command form to test whether it can run.

4. Switch to the directory where the mp3 audio file is located in the DOS command window, and finally type ffmpeg -i 1002_c.wav -f mp3 -acodec libmp3lame -y 2.mp3 (here is 1002_c.wav Change it to 2.mp3).

5. ffmpeg conversion of other audio formats and common commands.

Recommended related articles:

Analysis of the video (video) element in html5

The use and use of elements in svg Introduction to marker attributes

The above is the detailed content of Analysis of audio (audio) in html5. For more information, please follow other related articles on the PHP Chinese website!