Latest web development tutorials

HTML 오디오 (오디오)

다른 방법으로 재생할 수 있습니다 HTML의 소리.


문제 및 솔루션

HTML에 오디오를 재생하는 것은 쉬운 일이 아닙니다!

당신은 당신의 오디오 모든 브라우저에서 파일 (인터넷 익스플로러, 크롬, 파이어 폭스, 사파리, 오페라), 모든 하드웨어 (PC는, 맥, 아이 패드, 아이폰)을 연주 할 수 있도록 잘 알고 조언을 많이해야합니다.

이 장에서는 W3CSchool 당신은 문제와 해결 방법을 요약합니다.


플러그의 사용

브라우저 플러그는 표준 브라우저의 확장 작은 컴퓨터 프로그램을 갖추고있다.

- 인 플러그 <object> 태그 또는 페이지에 추가 <embed> 태그를 사용할 수 있습니다.

이러한 라벨은 자원 (전형적으로 비 - HTML 리소스) 컨테이너 타입에 따라, 그들은 또한 외부 플러그 - 인에 의해 표시되는 브라우저에 의해 표시되는 정의한다.


의 <포함> 요소를 사용하여

<삽입> 태그는 컨테이너 외부 (비 HTML) 내용을 정의합니다. (이 HTML4에서 HTML5 태그는 불법이지만, 모든 브라우저가 유효).

다음 코드는 웹 페이지에 내장 된 MP3 파일을 표시 할 수있다 :

<embed height="50" width="100" src="horse.mp3">

»시도

문제 :

  • <삽입은> HTML 4에서 태그가 잘못되었습니다. 페이지는 HTML 4에서 확인할 수 없습니다.
  • 다른 브라우저는 서로 다른 오디오 포맷을 지원합니다.
  • 브라우저가 파일 형식을 지원하지 않는 경우, 플러그인, 당신은 오디오를 재생할 수 없습니다.
  • 사용자의 컴퓨터가 연결에-되지 않은 경우 설치, 당신은 오디오를 재생할 수 없습니다.
  • 파일을 다른 형식으로 변환하는 경우, 아직 모든 브라우저에서 재생할 수 없습니다.

사용 <object> 요소

<개체 태그> 태그는 컨테이너 (비 HTML) 콘텐츠를 외부에서 정의 할 수 있습니다.

다음 코드는 웹 페이지에 내장 된 MP3 파일을 표시 할 수있다 :

<object height="50" width="100" data="horse.mp3"></object>

»시도

문제 :

  • 다른 브라우저는 서로 다른 오디오 포맷을 지원합니다.
  • 브라우저가 파일 형식을 지원하지 않는 경우, 플러그인, 당신은 오디오를 재생할 수 없습니다.
  • 사용자의 컴퓨터가 연결에-되지 않은 경우 설치, 당신은 오디오를 재생할 수 없습니다.
  • 파일을 다른 형식으로 변환하는 경우, 아직 모든 브라우저에서 재생할 수 없습니다.

HTML5 <오디오> 요소를 사용하여

HTML5는 <오디오> 요소는 HTML 4에서 HTML5 요소가 불법이지만, 모든 브라우저에서 유효합니다.

<오디오> 요소는 모든 최신 브라우저에서 작동합니다.

우리가 MP3 파일을 설명하기 위해 <오디오> 태그를 사용합니다 (인터넷 익스플로러, 크롬 및 사파리 효과) 아래, 또한 실패 할 경우 오류를 표시합니다. OGG 파일 형식 (파이어 폭스와 오페라 브라우저 효과)를 추가 텍스트 :

<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio>

»시도

문제 :

  • HTML 4에서 <오디오> 태그가 잘못되었습니다. 페이지는 HTML 4에서 확인할 수 없습니다.
  • 당신은 다른 형식으로 오디오 파일을 변환해야합니다.
  • <오디오> 요소는 이전 버전의 브라우저에서 작동하지 않습니다.

최고의 HTML 솔루션

다음의 예는 두 개의 서로 다른 오디오 포맷을 사용합니다. HTML5는 <오디오> 요소는 MP3 또는 오디오 OGG를 재생하려고합니다. 이 작업이 실패하면 코드는 <삽입> 요소를 롤백을 시도합니다.

<audio controls height="100" width="100">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>

»시도

문제 :

  • 당신은 다른 오디오 포맷으로 변환해야합니다.
  • <삽입> 요소는 오류 메시지를 표시하기 위해 롤백 할 수 없습니다.

야후 미디어 플레이어 - 귀하의 사이트에 오디오를 추가하는 간단한 방법

야후를 사용하여 플레이어는 무료입니다. 이를 사용하려면 페이지 하단에이 자바 스크립트를 넣어해야합니다

야후 플레이어는 MP3 등 다양한 포맷을 재생할 수 있습니다. 당신은 당신의 페이지 또는 블로그에 코드 한 줄을 추가해야합니다, 당신은 쉽게 전문 재생 목록으로 HTML 페이지를 만들 수 있습니다 :

<a href="horse.mp3">Play Sound</a>

<script src="http://mediaplayer.yahoo.com/latest"></script>

»시도

당신이 그것을 사용하려는 경우, 당신은 페이지 하단에이 자바 스크립트를 넣어해야합니다

<script src="http://mediaplayer.yahoo.com/latest"></script>

단순히 HTML에서 MP3 파일에 대한 링크를 넣어, 자바 스크립트가 자동으로 각 노래의 재생 버튼을 생성합니다 :

<a 노래 1 </a>을 플레이 href="song1.mp3">
<a 노래 2 </a>를 재생 href="song2.wav">
...
...

사용자를위한 야후 미디어 플레이어는 작은 재생 버튼 대신 전체 선수이다. 그러나, 당신은 완전한 플레이어를 나타납니다이 버튼을 클릭합니다.

이 플레이어는 항상 창 프레임의 하단에 고정되어 있습니다. 그냥 당신이 그것을 밖으로 밀어 수 있습니다, 그것을 클릭합니다.


하이퍼 링크를 사용하여

페이지가 미디어 파일을 가리키는 하이퍼 링크가 포함 된 경우, 대부분의 브라우저는 파일을 재생하는 "도우미 응용 프로그램"을 사용합니다.

다음 코드는 MP3 파일에 대한 링크를 보여줍니다. 사용자가 링크를 클릭하면, 브라우저는 파일을 재생 "헬퍼 애플리케이션"을 실행한다 :

<a href="horse.mp3">Play the sound</a>

»시도


설명 사운드 인라인

웹 페이지에 포함 할 때 소리 또는 웹 페이지의 일부로서, 그 인라인 사운드 불린다.

인라인은 웹 응용 프로그램에 소리를 사용하려는 경우, 당신은 많은 사람들이 인라인 찾을 수 성가신 소리를 실현해야합니다. 또한 사용자가 브라우저 인라인 사운드 옵션을 닫았 수 있습니다.

우리의 최선의 충고는 사용자가 사운드 인라인 장소를 포함 듣고 싶어 할 때만이다. 긍정적 인 예는 사용자가 녹음을 듣고 페이지를 열고 녹음을 재생하는 링크를 클릭해야 할 때이다.


HTML 멀티미디어 태그

새로운 기능 : HTML5 새 레이블

标签 描述
<embed> 定义内嵌对象。HTML4 中不赞成,HTML5 中允许。
<object> 定义内嵌对象。
<param> 定义对象的参数。
<audio> New 定义了声音内容
<video> New 定义一个视频或者影片
<source> New 定义了media元素的多媒体资源(<video> 和 <audio>)
<track> New 规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)