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 •

  1. 데모사이트 관련

    Date2013.05.07 Categoryxe레이아웃 Bygsm Views8682
    read more
  2. XE 버젼 업에 따른 관리자 페이지 변경

    Date2013.04.28 CategoryXE 홈피 Bygsm Views9328
    read more
  3. 원격 프로그램 팀뷰어

    Date2012.12.13 Category기타팁 Bygsm Views9343
    read more
  4. 초보자들을 위한 홈피만들기에 개념?

    Date2012.10.16 Category기타팁 Bygsm Views9945
    read more
  5. xe 설치과정입니다.

    Date2012.10.05 CategoryXE 홈피 Bygsm Views10085
    read more
  6. xe로 홈피 만들기 실전 1 - 개론

    Date2012.11.12 CategoryXE 홈피 Bygsm Views2526
    Read More
  7. 홈페이지 형식의 자기소개서?

    Date2012.10.31 Category연습용 Bygsm Views1761
    Read More
  8. 지금까지 사용해본 레이아웃

    Date2012.10.31 CategoryXE 홈피 Bygsm Views2334
    Read More
  9. xe 설치 두번째

    Date2012.10.25 CategoryXE 홈피 Bygsm Views2648
    Read More
  10. 풀다운 메뉴

    Date2012.10.05 Category기타팁 Bygsm Views1575
    Read More
  11. 제로보드 4 설치과정

    Date2012.07.15 Category제로보드4 Bygsm Views1696
    Read More
  12. 언젠가 만들었던 연습용 홈피

    Date2012.06.19 Category연습용 Bygsm Views1784
    Read More
  13. 사진배경 홈피

    Date2012.05.03 Category연습용 Bygsm Views1947
    Read More
  14. 웹폰트

    Date2012.03.22 Category기타팁 Bygsm Views2798
    Read More
  15. xe.. 제로보드 4처럼 사용하기..

    Date2012.03.20 CategoryXE 홈피 Bygsm Views5690
    Read More
  16. 테이블 레이아웃 두번째

    Date2012.03.20 Category연습용 Bygsm Views1754
    Read More
  17. 배경 x,y축으로 반복 또는 한번만 출력

    Date2012.03.19 Category기타팁 Bygsm Views1565
    Read More
  18. 테이블을 이용한 xe레이아웃 도전

    Date2012.03.11 Category연습용 Bygsm Views1819
    Read More
  19. xe 홈피만들기 연습

    Date2012.03.07 Category연습용 Bygsm Views1999
    Read More
  20. 제로보드4 노프레임 홈피파일

    Date2012.02.20 Category연습용 Bygsm Views2247
    Read More
  21. 포토샵 액션을 이용한 초간단 사진효과

    Date2012.02.15 Category기타팁 Bygsm Views2545
    Read More
  22. audio html5 태그

    Date2012.02.02 Category기타팁 Bygsm Views6514
    Read More
  23. embed 스타일

    Date2011.11.11 Category기타팁 Bygsm Views8125
    Read More
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에는 나눔글꼴이 설치되어 있지 않습니다.

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

설치 취소