예제 2-26. <audio> 태그로 오디오 삽입, <source> 태그
WEB/HTML5-CONCEPT 2017. 11. 4. 18:40 |<audio> 태그와 <source> 태그
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <audio scr="오디오 파일의 URL" controls // 이 속성이 설정되면 재생, 재생 시간, 중단, 음소거 등 제어 버튼 출력 autoplay // 이 속성이 설정되면 비디오 로딩 즉시 재생 loop> // 이 속성이 설정되면 반복 재생 이 태그를 지원하지 않는 브라우저가 출력하는 메세지 </audio> <source src="오디오 파일의 URL" type="오디오의 마임 타입"> 오디오 - 마임 타입(MIME Type) MP3 - audio/mpeg // 마임 타입이 audio/mp3가 아님을 주의하기. Wev - audio/wav ogg - audio/ogg | cs |
1 2 3 4 5 6 | <audio controls autoplay> <source src="mymusic.mp3" type="audio/mpeg"> <source src="mymusic.ogg" type="audio/ogg"> 브라우저가 audio 태그를 지원하지 않습니다. </audio> | cs |
* 브라우저가 bear.mp4를 재생 할 수 없으면 bear.ogg를 재생한다.
예제 2-26
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>오디오 삽입</title> </head> <body> <h3>오디오 삽입</h3> <hr> 페이지 로드 즉시 음악이 연주됩니다. <p> <audio src="media/EmbraceableYou.mp3" controls autoplay loop> 브라우저가 audio 태그를 지원하지 않습니다. </audio> </p> </body> </html> | cs |
'WEB > HTML5-CONCEPT' 카테고리의 다른 글
| 예제 3-2. <figure> 태그 활용 (1) | 2017.11.04 |
|---|---|
| 예제 3-1. 구조화된 HTML5 문서 작성 (0) | 2017.11.04 |
| 예제 2-25. <video> 태그로 비디오 삽입, <source> 태그 (0) | 2017.11.04 |
| 예제 2-24. target 속성으로 프레임 윈도우 활용 (0) | 2017.11.04 |
| 예제 2-22. 2개의 인라인 프레임을 가진 웹 페이지. 예제 2-23. <iframe>으로 2개의 신문 사이트 출력하기 (0) | 2017.11.04 |