2017. 8. 6. 23:13ㆍ하루만에 프로그래밍 끝내기/HTML
1. 홈페이지를 만들 때 이미지뿐만 아니라 다양한 멀티미디어를 삽입하면 어떨까요? 동영상이나 멀티미디어를 홈페이지에서 바로 보여 줄 수
있도록 만들어 봅니다.
2. 오디오를 사입하는 방법을 알아봅니다.
|
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>멀티미디어</title> </head> <body> <audio controls> <source src="sound.mp3" type="audio/mp3"> <span>브라우저에서 오디오를 지원하지 않습니다.</span><br> </audio> </body> </html> |
3. html5에서 지원하는 오디오 파일의 종류와 브라우저 버전을 알아봅니다.
|
파일 형식 |
설명 |
|
MP3 (.mp3) |
MPEG-1의 오디오 규격으로 개발된 형식으로 현재 널리 이용되고 있습니다. |
|
WAVE (.wav, .wave) |
MS사와 IBM이 개발한 비압축 형식의 오디오 파일입니다. 주로 윈도우즈에서 사용됩니다. |
|
OGG (.ogg, .ogv) |
스트리밍 방식의 멀티미디어 표현을 위한 공개 소스 기반의 파일 형식입니다. |
|
브라우저 |
버젼 |
MP3 |
WAV |
Ogg |
|
크롬 |
4.0 |
YES |
YES |
YES |
|
파이어폭스 |
3.5 |
YES |
YES |
YES |
|
사파리 |
4.0 |
YES |
YES |
NO |
|
오페라 |
10.5 |
YES |
YES |
YES |
|
인터넷 익스플로러 |
9.0 |
YES |
NO |
NO |
4. audio 요소의 속성을 알아봅시다.
속성 |
설명 |
src="파일주소" |
재생할 오디오 파일의 주소를 지정합니다. |
type="오디오타입" |
오디오 파일의 타입을 지정합니다. 웹 브라우저는 오디오 파일을 로드하지 않고도 먼저 재생 가능한지 type을 통해 확인할 수
있습니다. |
'하루만에 프로그래밍 끝내기 > HTML' 카테고리의 다른 글
| 7. 웹 문서의 디자인, CSS (0) | 2017.08.07 |
|---|---|
| 6. 멀티미디어를 넣어보자 - VIDEO (0) | 2017.08.06 |
| 5. 페이지를 넘어가자, 하이퍼링크 (0) | 2017.08.06 |
| 4. 앨범을 만들어 보자 (1) | 2017.08.05 |
| 3. 이미지를 불러 보자 (0) | 2017.08.02 |