HTML5 오디오

HTML5의 오디오 기능은 이미 매우 강력합니다. 이전에는 플래시에서만 가능했던 재생, 점프, 버퍼링 및 기타 기능을 HTML5의 오디오로 쉽게 처리할 수 있습니다.

하지만 지금까지는 웹페이지에서 오디오를 재생하는 것에 대한 표준이 없었습니다.

오디오 구문, 속성 및 메서드

구문 사용
< src="song.mp3"controls="controls" loop="loop" autoplay="autoplay"> 귀하의 브라우저는 html5</audio>
속성
의 오디오 태그를 지원하지 않습니다. src는 노래의 경로입니다.
컨트롤 재생 컨트롤 태그에 컨트롤="컨트롤"을 쓰면 웹 페이지에 오디오와 함께 제공되는 재생 컨트롤이 표시됩니다. 쓰지 않으면 표시되지 않습니다.
loop 노래 루프는 노래 루프에 이 속성을 추가합니다. 노래가 백그라운드에서 검색되면 ajax에서 loop=true/false를 설정하여 노래를 자동으로 재생할 수도 있습니다. 로드되지만 PC 측에서만 모바일 측을 구현할 수 있습니다. 아니요(PC 브라우저는 모바일 브라우저보다 훨씬 완벽하며 일부 속성에 대한 지원은 훨씬 더 좋습니다)
위는 태그 내의 속성입니다. auido를 호출하고 제어하는 객체 속성으로 사용할 수도 있습니다.*

오디오는 레이블일 뿐만 아니라 창 아래의 객체이기도 합니다. 객체는 속성과 메서드를 갖습니다.

객체 속성:

currentTime 현재 재생 시간 가져오기
duration 노래의 총 시간 가져오기
재생 여부 반환 true/false
일시 중지 여부 일시 중지되고 true/false를 반환합니다
객체 메서드:
play() 노래 재생
pause() 노래 일시 중지
load() 노래 다시 로드

HTML5의 세 가지 기본 형식:

1. 최소 코드

2. 비호환 알림이 포함된 코드

<audio src="song.ogg"controls="controls">오디오 태그를 지원하지 않는 브라우저입니다.
</audio>

3. 브라우저 쓰기와 호환되도록 노력하세요

< ;audiocontrols="controls"><source src="song.ogg" type="audio/ogg" >
<source src="song.mp3" type="audio/mpeg ">
귀하의 브라우저가 오디오 태그를 지원하지 않습니다.
</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>

다음 섹션

새로운 파일

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

제출하다 코드 재설정

자동운전

전체 화면