태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

[html5] audio 태그로 음악 파일 삽입

9년 전

<audio>태그는 문서에 음악 파일이나 오디오 스트리밍을 삽입하는 요소입니다.

(html5에 도입된 새로운 요소임)

현재는 세 파일 형식만 지원하고 있습니다.

mp3, ogg, wav  (본문 내용 중 src 참조)

<audio>요소 지원 브라우저 : IE 9+, Chrome 4.0+, FF3.5+, Safari 4.0+, Opera 10.5+

▶사용 법:

<audio controls loop>
  <source src="rain.ogg" type="audio/ogg">
  <source src="rain.mp3" type="audio/mpeg">
대체내용
</audio>

▶함께 사용할 수 있는 속성

autoplay

이 속성이 명시되면, 오디오가 준비되자마자 자동으로 재생을 시작합니다.

지원브라우저: IE 9+, Chrome, FF, Safari, Opera

사용법:

html5에서는, <audio autoplay>
xhtml에서는 <audio autoplay="autoplay">

controls

이 속성이 명시되면, 오디에 재생에 관한 조절 장치를 보여줍니다.
(play/pause/volume 등)

지원브라우저: IE 9+, Chrome, FF, Safari, Opera

사용법:

html5에서는, <audio controls>
xhtml에서는, <audio controls="controls">

loop

명시되면, 음악을 반복 재생합니다.

지원브라우저: IE 9+, Chrome, FF, Safari, Opera

사용법:

html5에서는, <audio loop>
xhtml에서는, <audio loop="loop">.

muted

오디오를 음소거할지 지정 (기본값은 false)

지원 브라우저: IE 10+, Chrome, FF,  Opera

사용법:

html5에서는, <audio muted>
xhtml에서는, <audio muted="muted">

preload

*ie만 제외하고 주요 브라우저에서 지원.

페이지가 로드될 때 오디오 파일이 어떻게 로드돼야 하는지에 지정

-none: 오디오 파일이 로드돼선 안 됨.
-metadata:  페이지가 로드될 때 metadata만 로드돼야 함
-auto:  페이지가 로드될 때 전체 오디오 파일이 로드돼야 함.

설정되지 않으면, 브라우저의 기본 속성값이 지정 됨(명세에서는 metadata로 설정하라 권고 함)

사용법: <audio preload="auto|metadata|none">

명세에 따르면, autoplay 와  preload 속성을 같이 지정할 수 있습니다~

src : 삽입할 오디오의 주소

지원브라우저: IE 9+, Chrome, FF, Safari, Opera

src 속성은 위 브라우저에서 지원되지만, 브라우저마다 지원 파일 포맷이 다릅니다.

현재 <audio>요소는 세 가지 파일 형식을 지원합니다.

mp3 파일: IE , Safari, Chrome
              Firefox의 경우, 윈도우7.8,비스타에서 FF21일 때 작동함(안드로이드는 지원하지 않음)
Ogg 파일: FF, Opera, Chrome
wav 파일:  Chrome, FF, Safari, Opera

사용법:
<audio src="rain.mp3" autoplay>
이 브라우저는 audio를 지원하지 않습니다</audio>

src 속성 대신 여러 파일을 올리기 위해  <source> 요소를 사용할 수 있습니다.

(브라우저는 첫번째 인식된 포맷을 사용할 것임)

<source>요소

<source>태그는 <video> <audio>태그와 함께 쓰여

미디어 타입이나 코덱에 따라 자원을 선택할 수 있도록 지정할 수 있습니다.

지원 브라우저: IE9.0+, FF3.5+, Safari4.0+, Opera 10.5+

▶함께 사용할 수 있는 속성

media: media_query(주요 브라우저 지원 안함)

src:  파일 경로

type: MIME_type(파일 형식 유형)

Format        MIME-type
mp3        audio/mpeg
ogg        audio/ogg
wav        audio/wav

사용법:

<audio controls  loop>
  <source src="abc.ogg" type="audio/ogg">
  <source src="abc.mp3" type="audio/mpeg">
이 브라우저는 audio 태그를 지원하지 않습니다.<br>
지원 브라우저: IE 9+, Chrome 4.0+, FF3.5+, Safari 4.0+, Opera 10.5+
</audio>

audio 태그를 지원하지 않는 브라우저를 위해 <embed>태그와 섞어 쓰기도 합니다~

[html5] embed 태그

<audio controls  loop>
  <source src="abc.ogg" type="audio/ogg">
  <source src="abc.mp3" type="audio/mpeg">
<embed src="abc.mp3" type="audio/mpeg" autoplay="false" controller="true" loop="true" width="200" height="70">
</audio>

추천 목록

번호	제목
2,675	[Shoutcast] 현재 플레이되는 곡명 스크립트 PHP
2,674	[Shoutcast] 스트리밍 노래제목을 변경 스크립트
2,673	Shoutcast PHP Scripts
2,672	FTP에서 삭제 안되는 파일이나 폴더 삭제하기
2,671	SHOUTcast 를 이용한 인터넷 라이브 방송 시스템 구축
2,670	DAUM 우편번호 서비스 활용하기
2,669	실행중 PHP 에러 메시지 레벨 조정하기
2,668	PHP 인젝션과 file get contents의 관계
2,667	문자열 글자 순서 거꾸로 뒤집기, 앞뒤 반전 Reverse String
2,666	배열 요소 순서 거꾸로 뒤집기, 앞뒤 반전 Reverse Array
2,665	php 메모리 사용
2,664	자바스크립트 내부 객체 보기
2,663	자바 스크립트 숫자 처리 콤마 처리
2,662	자바스크립트 Base64 encode, decode
2,661	PHP 문자열 관련 함수
2,660	[php] 문자열을 나누거나 합치는 explode, implode 함수
2,659	php 문자열 자르기 나누기 분리하기 - explode() , split()
2,658	DB 접근 및 쿼리문(insert,select,update,delete)
2,657	[MySQL] 필드에서 특정문자 포함 또는 제외한 DB 검색, LIKE ,NOT
2,656	php5 mysqli 디비 접속 클래스 프로그램 및 사용법
2,655	PHP 문자열 나누기 - explode()
2,654	[PHP] 배열 Array
2,653	php 배열
2,652	[php] Array() 배열이란?
2,651	PHP 배열 함수 정리
2,650	PHP 기본적인 배열 사용법
2,649	html에서 입력한값 DB에서 받아오기 (도서정보 검색)
2,648	SQL 쿼리 정리
2,647	[MySql]DB에서 서로 다른 테이블의 데이터를 한번에 불러오기
2,646	jquery checkbox 전체 선택, 전체 해제, 체크 값 추출