>  기사  >  웹 프론트엔드  >  html5의 오디오(오디오) 분석

html5의 오디오(오디오) 분석

不言
不言원래의
2018-08-06 11:13:173324검색

이 글에서 공유한 내용은 HTML5의 오디오(오디오) 분석에 관한 내용으로, 도움이 필요한 친구들이 참고하시면 좋겠습니다.

html5 오디오 배경 사용

지금까지는 웹 페이지에서 오디오 재생을 목표로 하는 표준이 아직 없었습니다. 오늘날 대부분의 오디오는 Flash와 같은 플러그인을 통해 재생됩니다. 그러나 모든 브라우저에 동일한 플러그인이 있는 것은 아닙니다. HTML5는 사운드 파일이나 오디오 스트림을 재생할 수 있는 audio 요소를 통해 오디오를 포함하는 표준 방법을 지정합니다.

오디오 형식

현재 오디오 요소는 Ogg Vorbis, Mp3 및 Wav의 세 가지 오디오 형식을 지원합니다. 이는 다음과 같은 오디오 형식 브라우저 지원입니다.

오디오 형식 IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis
MP3
Wav



오디오 요소를 사용하여 오디오 재생 구현

컨트롤 속성 오디오 요소의 재생, 일시 정지 및 볼륨 컨트롤이 제공됩니다. b97864c2e0ef2353a16c4d64c7734e92와 81d2bc32cafa2076a27f10cdd878d0ab 브라우저 호환 오디오 형식 문제를 해결하십시오. 질문, 위의 5개 브라우저에서 오디오를 재생할 수 있도록 아래 두 가지 소스 요소가 사용됩니다. 간단한 코드는 다음과 같습니다.

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

Dom을 사용하여 오디오를 조작합니다

사용자 정의 버튼을 사용하여 컨트롤 속성의 재생 및 일시 정지 기능을 구현합니다. 코드는 다음과 같습니다.

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

오디오 형식 변환(Wav 형식으로 변환) MP3 형식으로)

1. 먼저 ffmpeg를 다운로드하고 URL www.ffmpeg.org(오픈 소스 URL)를 입력한 다음 windows를 입력하여 파일의 Windows 버전을 다운로드합니다.

2. ffmpeg 압축 파일의 압축을 풀고(예: ffmpeg-20180803-5aeb3b0-win32-static.zip) ffmpegbin 디렉터리(G: mydeveloperapplicationhbuilderhtml5ffmpeg-20180803-5aeb3b0-win32-staticbin)에 경로를 추가합니다. 환경변수 경로.

3. 환경 변수를 설정한 후 DOS 명령 형식에 ffmpeg를 입력하여 실행 가능한지 테스트합니다.

4. DOS 명령 창에서 mp3 오디오 파일이 있는 디렉터리로 전환하고 마지막으로 ffmpeg -i 1002_c.wav -f mp3 -acodec libmp3lame -y 2.mp3를 입력합니다(여기서는 1002_c.wav를 2로 바꿉니다). .mp3).

5. 다른 오디오 형식 및 일반 명령으로 ffmpeg 변환.

추천 관련 기사:

html5의 비디오(비디오) 요소 분석

svg의 53207a333cb59025d48bd080b9112b21 요소 사용 및 마커 속성 소개

위 내용은 html5의 오디오(오디오) 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.