HTML5를 사용하면 요소가있는 웹 페이지에 사운드와 음악을 쉽게 추가 할 수 있습니다. 사실 가장 어려운 일은 사운드 파일이 가장 다양한 브라우저에서 재생되는지 확인하는 데 필요한 여러 소스를 만드는 것입니다.
HTML5를 사용하면 몇 가지 태그를 사용하여 사운드를 삽입 할 수 있다는 이점이 있습니다. 그런 다음 브라우저는 IMG 요소를 사용할 때 이미지를 표시하는 것처럼 사운드를 재생합니다.
HTML5 웹 페이지에 사운드를 추가하는 방법
HTML 편집기 , 사운드 파일 (MP3 형식이 바람직 함) 및 사운드 파일 변환기가 필요합니다.
- 먼저 사운드 파일이 필요합니다. 파일을 MP3 ( .mp3 ) 형식으로 녹음하는 것이 가장 좋습니다. 이는 음질이 우수하며 대부분의 브라우저 (Android 2.3 이상, Chrome 6 이상, IE 9 이상, iOS 3 이상, Safari 5 이상)에서 지원됩니다.
- 파일을 Vorbis 형식 ( .ogg )으로 변환하여 Firefox 3.6 이상 및 Opera 10.5 이상을 추가하십시오. Vorbis.com에서 찾은 것과 같은 변환기를 사용할 수 있습니다. 또한 MP3와 WAV 파일 형식 ( .wav )을 변환하여 Firefox 및 Opera 지원을받을 수 있습니다. 세 가지 유형 모두에서 보안을 위해 파일을 게시하는 것이 좋지만 가장 필요한 것은 MP3 및 다른 유형입니다.
- 모든 오디오 파일을 웹 서버에 업로드하고 저장된 디렉토리를 적어 두십시오. 대부분의 설계자가 이미지 디렉토리에 이미지를 저장하는 것처럼 오디오 파일 만 하위 디렉토리에 배치하는 것이 좋습니다.
- 사운드 파일 컨트롤을 표시 할 AUDIO 요소를 HTML 파일에 추가하십시오. <오디오 컨트롤>
- AUDIO 요소 안에 업로드하는 각 오디오 파일에 대해 SOURCE 요소를 배치하십시오.
-
- AUDIO 요소 내부의 HTML은 AUDIO 요소를 지원하지 않는 브라우저의 대체 수단으로 사용됩니다. 그래서 일부 HTML을 추가하십시오. 가장 쉬운 방법은 HTML을 추가하여 파일을 다운로드 할 수 있지만 HTML 4.01 포함 메서드를 사용하여 사운드를 재생하는 것입니다. 간단한 폴백이 있습니다.
브라우저가 오디오 재생을 지원하지 않으므로 파일을 다운로드하십시오.
- 마지막으로해야 할 일은 AUDIO 요소를 닫는 것입니다.
- 완료되면 HTML이 다음과 같이 표시됩니다.
추가 팁
- HTML이 유효성을 검사 할 수 있도록 HTML5 doctype ()을 사용해야합니다.
- 요소에 사용할 수있는 특성을 검토하여 요소에 추가 할 수있는 다른 옵션을 확인하십시오.
- 기본적으로 컨트롤을 포함하도록 HTML을 설정하고 자동 재생을 사용 중지합니다. 물론 그것을 바꿀 수는 있지만, 많은 사람들이 자동으로 시작되는 사운드를 찾거나 기껏해야 성가신 사운드로 제어 할 수없는 사운드를 발견하고 종종 그런 일이 발생하면 페이지를 떠날 것입니다.