Skip to content

기타팁
2012.02.02 20:37

audio html5 태그

?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부 수정 삭제
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부 수정 삭제

audio_gallery.png

 

지금까지 웹페이지에서 음악이나 영상을 재생하는데 embed 태그를 써왔다.

 

다행히 embed가 크롬에서도 먹혀서 잘 사용하곤 있지만 모바일에서는 안되는 단점이 있다.

 

그래서 나온것이 html5 태그중 audio 태그이다.

 

위에 그림은 audio 태그에 대한 브라우져별 플레이어의 모습이다.

 

문제는 이 태그가 모든 브라우져에서 지원하지 않는다는 것이다.

 

앞서 말한것처럼 html5를 지원해주는 브라우져에서만 가능하다

 

우선 크롬에서는 잘된다.

 

근데 익플에서는 익플9에선 지원이 된다는데 왠지 잘 안된다.

 

그리고 브라우져 별로 지원하는 파일포맷이 다르다.

 

Browser .mp3 .wav .ogg
Mozzila Firefox 3.6 ? ?
Opera 10.63 ? ?
Google Chrome 8.0 ? ? ?
Apple Safari 5.0.3 (with QuickTime) ? ?
Microsoft IE 9 ?

?

위처럼  크롬, 사파리, ie9 에서는 mp3가 지원이 되지만 오페라와 파이어폭스에선 안된다.

아래는 http://ryunad.tistory.com/67 에서 참조한 내용입니다.

 

How To

<audio src="song.ogg" controls="controls">
< /audio>

Video 태그와 마찬가지로 controls라는 속성을 설정하면 play, pause, volum 컨트롤을 추가합니다.

<audio src="song.ogg" controls="controls">
Your browser does not support the audio element.
< /audio>


< audio> 태그 사이에 HTML5를 지원하지 않거나 오디오포맷을 지원하지 않을 때
표시할 문자열을 넣을 수 있습니다.

<audio controls="controls">
< source src="song.ogg" type="audio/ogg" />
< source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
< /audio>


Audio 태그는 source 태그를 여러 개 포함할 수 있습니다.
audio태그가 지원하는 포맷일 경우 해당 source를 재생합니다. 만약 지원하는 포맷이 없다면
audio태그 사이의 문자열이 표시될 것 입니다.

All <audio> Attributes

Attribute

Value

Description

autoplay

autoplay

Audio가 준비되는 대로 재생합니다.

controls

controls

.play, pause, volumn 컨트롤이 추가됩니다

loop

loop

Audio 재생이 끝나면 처음부터 다시 재생합니다.

preload

preload

page가 로드될 때 미리 Audio파일을 로드하고 실행준비합니다. autoplay가 설정되있다면 이 값은 무시됩니다.

src

url

재생할 Audio파일의 주소입니다.

TAG •

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
공지 xe레이아웃 데모사이트 관련 gsm 2013.05.07 8682
공지 XE 홈피 XE 버젼 업에 따른 관리자 페이지 변경 file gsm 2013.04.28 9327
공지 기타팁 원격 프로그램 팀뷰어 file gsm 2012.12.13 9343
공지 기타팁 초보자들을 위한 홈피만들기에 개념? gsm 2012.10.16 9945
공지 XE 홈피 xe 설치과정입니다. gsm 2012.10.05 10085
67 기타팁 파비콘 만들기 Gsm 2011.07.26 1766
66 기타팁 파비콘을 위한 포샵 아이콘만들기 플러그인 file Gsm 2011.08.09 2190
65 기타팁 상단 메뉴부 file Gsm 2011.08.22 1626
64 기타팁 마우스 오버시 레이어 이미지 변경 file gsm 2011.09.18 2233
63 XE 홈피 xe 파일 삭제 file gsm 2011.11.07 3049
62 기타팁 썸네일 확대보기 file gsm 2011.11.08 1753
61 기타팁 상대경로와 절대경로 gsm 2011.11.08 1964
60 기타팁 embed 스타일 file gsm 2011.11.11 8125
» 기타팁 audio html5 태그 file gsm 2012.02.02 6514
58 기타팁 포토샵 액션을 이용한 초간단 사진효과 file gsm 2012.02.15 2545
57 연습용 제로보드4 노프레임 홈피파일 file gsm 2012.02.20 2247
56 연습용 xe 홈피만들기 연습 file gsm 2012.03.07 1999
55 연습용 테이블을 이용한 xe레이아웃 도전 file gsm 2012.03.11 1819
54 기타팁 배경 x,y축으로 반복 또는 한번만 출력 gsm 2012.03.19 1565
53 연습용 테이블 레이아웃 두번째 file gsm 2012.03.20 1754
52 XE 홈피 xe.. 제로보드 4처럼 사용하기.. gsm 2012.03.20 5690
51 기타팁 웹폰트 file gsm 2012.03.22 2797
50 연습용 사진배경 홈피 file gsm 2012.05.03 1947
49 연습용 언젠가 만들었던 연습용 홈피 file gsm 2012.06.19 1784
48 제로보드4 제로보드 4 설치과정 file gsm 2012.07.15 1696
Board Pagination Prev 1 2 3 4 5 6 Next
/ 6

Recent Articles

Gloomy의 비오는 일요일 홈피는 모든 저작권을 포기합니다.

Powered by Xpress Engine / Designed by Sketchbook

sketchbook5, 스케치북5

sketchbook5, 스케치북5

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소