HTML 오디오

HTML 오디오(오디오)

HTML에서는 다양한 방식으로 사운드를 재생할 수 있습니다.

문제 및 해결 방법

HTML에서 오디오를 재생하는 것은 쉽지 않습니다!

오디오 파일이 모든 브라우저(Internet Explorer, Chrome, Firefox, Safari, Opera) 및 모든 하드웨어(PC, Mac, iPad, iPhone)에서 작동하는지 확인하려면 많은 요령을 알아야 합니다. .

이 장에서는 PHP 중국어 웹사이트(php.cn)에서 문제와 해결 방법을 요약합니다.

플러그인 사용하기

브라우저 플러그- in은 브라우저의 표준 기능을 확장하는 작은 컴퓨터 프로그램입니다.

이러한 태그는 리소스(일반적으로 HTML이 아닌 리소스)에 대한 컨테이너를 정의합니다. 유형에 따라 브라우저와 외부 플러그인에 의해 표시됩니다.

<embed> 요소 사용

다음 코드 조각은 웹 페이지에 포함된 MP3 파일을 표시할 수 있습니다.

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<embed height="50" width="100" src="horse.mp3">
    <p>如果你无法听到该音频，那么可能你的电脑或浏览器不支持该文件格式。</p>
    <p>或者你没有打开扬声器。</p>
</embed>
</body>
</html>

로컬에서 mp3 형식의 오디오를 찾아 src="horse.mp3"를 mp3 파일로 바꾸고 열어보세요. 웹페이지를 다시

문제:

<embed> HTML 4에서는 유효하지 않습니다. 페이지가 HTML 4 유효성 검사에 실패했습니다.
브라우저마다 오디오 형식 지원이 다릅니다.
브라우저가 해당 파일 형식을 지원하지 않는 경우 플러그인 없이는 오디오를 재생할 수 없습니다.
사용자 컴퓨터에 플러그인이 설치되어 있지 않으면 오디오를 재생할 수 없습니다.
파일을 다른 형식으로 변환해도 모든 브라우저에서 재생할 수 없습니다.

<object> 요소 사용

다음 코드 조각은 웹 페이지에 포함된 MP3 파일을 표시할 수 있습니다.

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<object height="100" width="300" data="Kalimba.mp3"></object>
<p>如果你无法听到该音频，那么可能你的电脑或浏览器不支持该文件格式。</p>
<p>或者你没有打开扬声器。</p>
</body>
</html>

로컬에서 mp3 형식의 오디오를 찾아 src="horse.mp3"를 mp3 파일로 바꾸고 열어보세요. 웹 페이지를 다시

질문:

지원하는 브라우저도 다릅니다.
브라우저가 해당 파일 형식을 지원하지 않는 경우 플러그인 없이는 오디오를 재생할 수 없습니다.
사용자 컴퓨터에 플러그인이 설치되어 있지 않으면 오디오를 재생할 수 없습니다.
파일을 다른 형식으로 변환해도 모든 브라우저에서 재생할 수 없습니다.

HTML5 <audio> 요소 사용

HTML5 <audio> HTML5 요소는 HTML 4에서는 불법이지만 모든 브라우저에서 작동합니다.

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

아래에서는 <audio> 태그를 사용하여 MP3 파일을 설명합니다(Internet Explorer, Chrome 및 Safari에서 유효). OGG 유형 파일을 추가합니다(Firefox 및 Opera 브라우저에서 유효함). 실패하면 오류 텍스트 메시지가 표시됩니다:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<audio controls>
    <source src="horse.mp3" type="audio/mpeg">
    <source src="horse.ogg" type="audio/ogg">
    您的浏览器不支持该音频格式。
</audio>
</body>
</html>

브라우저가 오디오 형식을 지원하지 않으면 "브라우저는 다음을 수행합니다." 이 오디오 형식을 지원하지 않습니다.", 그렇지 않으면

문제: HTML 4의

<audio> 태그가 유효하지 않습니다. 귀하의 페이지가 HTML 4 유효성 검사에 실패했습니다.
오디오 파일을 다른 형식으로 변환해야 합니다.
<audio> 요소는 이전 브라우저에서 작동하지 않습니다.

최고의 HTML 솔루션

아래 예에서는 두 가지 오디오 형식을 사용합니다. HTML5 <audio> 요소는 오디오를 mp3 또는 ogg로 재생하려고 시도합니다. 실패하면 코드는 <embed> 요소를 시도하게 됩니다.

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<audio controls>
    <source src="horse.mp3" type="audio/mpeg">
    <source src="horse.ogg" type="audio/ogg">
    <embed height="50" width="100" src="horse.mp3">
</audio>
</body>
</html>

src를 로컬 오디오로 바꾸고 사용해 보세요

질문:

You The 오디오는 다른 형식으로 변환되어야 합니다.

Yahoo Media Player - 웹사이트에 오디오를 추가하는 쉬운 방법

Yahoo Media Player는 사용자에게 전체 플레이어 대신 작은 재생 버튼을 제공합니다. 그러나 버튼을 클릭하면 전체 플레이어가 팝업됩니다.

이 플레이어는 항상 창틀 하단에 도킹되어 있다는 점에 유의하세요. 그냥 클릭해서 밀어내시면 됩니다.

Yahoo Player 사용은 무료입니다. 이를 사용하려면 웹페이지 하단에 다음 JavaScript를 삽입해야 합니다.

Yahoo Player는 MP3 및 기타 다양한 형식을 재생할 수 있습니다. 페이지나 블로그에 코드 한 줄만 추가하면 HTML 페이지를 전문 재생목록으로 쉽게 전환할 수 있습니다.

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

예제

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<p><a href="Kalimba.mp3">Play mp3</a></p>
<script src="http://mediaplayer.yahoo.com/latest"></script>
</body>
</html>

오디오 파일을 찾아 들어보세요

하이퍼링크 사용

웹 페이지에 미디어 파일에 대한 하이퍼링크가 포함되어 있는 경우 대부분의 브라우저는 "도우미 애플리케이션"을 사용하여 파일을 재생합니다.

다음 코드 조각은 mp3 파일에 대한 링크를 표시합니다. 사용자가 링크를 클릭하면 브라우저는 파일을 재생하기 위해 "도우미 애플리케이션"을 실행합니다.

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<h2>链接到一首歌</h2>
<p><a href="nverq.mp3">点击此处播放</a></p>
</body>
</html>

오디오 파일을 찾아서 사용해 보세요.

인라인 사운드 설명

웹 페이지에 사운드를 포함하거나 웹 페이지의 필수 부분으로 사운드를 포함하는 경우 이를 인라인 사운드라고 합니다.

웹 애플리케이션에서 인라인 사운드를 사용할 계획이라면 많은 사람들이 인라인 사운드를 불편하게 여긴다는 점을 염두에 두어야 합니다. 또한 사용자가 브라우저에서 인라인 사운드 옵션을 해제했을 수도 있습니다.

가장 좋은 조언은 사용자가 들을 것으로 예상되는 인라인 사운드만 포함하는 것입니다. 긍정적인 예는 사용자가 녹음 내용을 들어야 할 때 링크를 클릭하면 페이지가 열리고 녹음 내용이 재생되는 경우입니다.

HTML 멀티미디어 태그

HTML5 새 태그

标签	描述
<embed>	定义内嵌对象。HTML4 中不赞成，HTML5 中允许。
<object>	定义内嵌对象。
<param>	定义对象的参数。

<audio>	定义了声音内容
<video>	定义一个视频或者影片
<source>	定义了media元素的多媒体资源(<video> 和 <audio>)
<track>	规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <audio controls> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> <embed height="50" width="100" src="horse.mp3"> </audio> </body> </html>

제출하다 코드 재설정

자동운전