HTML에 음악 mp3를 추가하는 방법
- 醉折花枝作酒筹원래의
- 2021-06-04 13:38:0920010검색
HTML에서는 embed 태그를 사용하여 음악을 추가할 수 있습니다. 본문 영역에 "6510e736ab0813436f3ffcb27edee1f7" 코드만 추가하면 됩니다. Embed 태그를 이용하여 다양한 멀티미디어를 삽입할 수 있으며, 형식은 Midi, Wav, AIFF, AU, MP3 등이 가능합니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
embed 태그를 사용하여 음악을 추가할 수 있습니다. d8e2720730be5ddc9c2a3782839e8eb6 태그는 플러그인과 같은 삽입된 콘텐츠를 정의합니다.
구문:
embed src=url
설명: embed는 다양한 멀티미디어를 삽입하는 데 사용할 수 있습니다. 형식은 Midi, Wav, AIFF, AU, MP3 등이 될 수 있습니다. Netscape 및 새 버전의 IE가 이를 지원합니다. URL은 오디오 또는 비디오 파일과 해당 경로이며 상대 경로 또는 절대 경로일 수 있습니다.
예:
코드는 다음과 같습니다:
<embed src="your.mid">
2. 속성 설정
1. 자동 재생:
구문: autostart=true, false
설명: 이 속성은 오디오 또는 비디오 파일이 자동으로 재생되는지 여부를 지정합니다. 플레이를 다운로드한 후
true: 다운로드 후 음악 파일이 자동으로 재생됩니다.
false: 다운로드 후 음악 파일이 자동으로 재생되지 않습니다.
예:
코드는 다음과 같습니다:
<embed src="your.mid" autostart=true> <embed src="your.mid" autostart=false>
2. 루프 재생:
구문: loop=양의 정수, true, false
설명: 이 속성은 오디오 또는 비디오 파일이 루프되고 루프 수.
속성 값이 양의 정수 값이면 오디오 또는 비디오 파일의 반복 횟수는 양의 정수 값과 같습니다.
속성 값이 true이면 오디오 또는 비디오 파일이 반복됩니다. 속성 값이 false이면 오디오 또는 비디오 파일이 순환되지 않습니다.
예:
코드는 다음과 같습니다:
<embed src="your.mid" autostart=true loop=2> <embed src="your.mid" autostart=true loop=true> <embed src="your.mid" autostart=true loop=false>
3. 패널 표시:
구문: Hidden=ture, no
설명: 이 속성은 제어판 표시 여부를 지정합니다.
- ture: 패널 숨기기
- no: 패널 표시.
- 예:
코드는 다음과 같습니다.
<embed src="your.mid" hidden=ture> <embed src="your.mid" hidden=no>
4. 시작 시간:
구문: starttime=mm:ss(분:초)
설명: 이 속성은 오디오 또는 비디오가 재생되는 시간을 지정합니다. 파일이 재생되기 시작합니다. 정의하지 않은 경우 파일의 처음부터 재생합니다.
예:
코드는 다음과 같습니다:
<embed src="your.mid" starttime="00:10">
5. 볼륨:
구문: 볼륨=0-100 사이의 정수
설명: 이 속성은 오디오 또는 비디오 파일의 볼륨을 지정합니다. 정의되지 않은 경우 시스템 자체 설정이 사용됩니다.
예:
코드는 다음과 같습니다.
<embed src="your.mid" volume="10">
6. 컨테이너 속성:
구문: height=# width=#
설명: 값은 양의 정수 또는 백분율이며 단위는 픽셀입니다. 이 속성은 제어판의 높이와 너비를 지정합니다.
height：控制面板的高度； width：控制面板的宽度。
예:
코드는 다음과 같습니다.
<embed src="your.mid" height=200 width=200>
7. 컨테이너 단위:
구문: Units=pixels, en
설명: 이 속성은 높이와 너비의 단위를 픽셀 또는 en으로 지정합니다.
예:
코드는 다음과 같습니다:
<embed src="your.mid" units="pixels" height=200 width=200> <embed src="your.mid" units="en" height=200 width=200>
8. 모양 설정:
구문:controls=console, smallconsole, playbutton, Pausebutton, stopbutton, Volumelever 설명: 이 속성은 제어판의 모양을 지정합니다. 기본값은 콘솔입니다.
- 콘솔: 일반 패널;
- 작은 패널:
- 재생 버튼: 재생 버튼만 표시합니다.
- 일시 정지 버튼만 표시합니다. 정지 버튼 표시
- 볼륨 레버: 볼륨 조절 버튼만 표시합니다.
- 예:
-
코드는 다음과 같습니다:
<embed src="your.mid" controls=smallconsole> <embed src="your.mid" controls=volumelever>
9. 설명 텍스트:
예:
코드는 다음과 같습니다.
<embed src="your.mid" title="第一首歌">확장 정보:
WebM 옹호
Chrome, Firefox가 이끄는 오픈 소스 캠프인 AVC(H.264)의 라이센스 문제로 인해 , Opera는 AVC에 대한 지원에 흔들리기 시작했습니다. 이러한 브라우저는 여전히 AVC를 지원할 수 있지만 VP8이라는 새로운 오픈 소스 비디오 코덱 체계를 포함하는 WebM이라는 오픈 소스 멀티미디어 프로젝트도 지원하는 경향이 있습니다. 현재 VP8은 VP9로 개발되었습니다. 캡슐화된 형식인 WebM에는 .webm 접미사와 video/webm MIME 유형이 있습니다. 오디오의 경우 Vorbis/Opus를 사용할 수 있습니다. 호환성 측면에서 볼 때 Chrome, Firefox, Opera는 VP8과 매우 호환되지만 Safari와 IE는 VP8을 거의 지원하지 않습니다.
오픈 소스 Ogg
Ogg는 오픈 소스인 WebM과 거의 동일하며 오픈 소스 플랫폼에서 널리 지원됩니다. 비디오 인코딩 방식은 Theora(VP3에서 개발되고 Xiph.org 재단에서 개발되었으며 모든 패키징 형식으로 사용 가능)라고 하며 오디오는 Vorbis입니다. 접미사는 일반적으로 .ogv 또는 .ogg이며 MIME 유형은 video/ogg입니다. 호환성 측면에서는 Chrome, Firefox, Opera에서는 지원할 수 있지만(단, Opera는 모바일 플랫폼에서는 지원할 수 없습니다) Safari와 IE에서는 거의 지원하지 않습니다.
Html5方案
以上的讨论实际上的大前提是：视频基于Html5的39000f942b2545a5315c57fa3276f220方案。现在我们来总结一下兼容性：
Codecs/container |
IE |
Firefox |
Safari |
Chrome |
Opera |
iPhone |
Android |
Theora+Vorbis+Ogg |
· |
3.5+ |
|
5.0+ |
10.5+ |
· |
· |
H.264+AAC+MP4 |
9.0+ |
· |
3.0+ |
5.0+‡ |
· |
3.0+ |
2.0+ |
WebM |
9.0+* |
4.0+ |
|
6.0+ |
10.6+ |
· |
2.3+ |
* IE9 “只有当用户安装了VP8的编解码器时”才能支持VP8。 | |||||||
‡ Google Chrome 2011年宣布 放弃H.264, 但是“还没兑现”。 | |||||||
可以看出现在主流的仍然是MP4(AVC)，但是为了解决“开源阵营”对AVC的摇摆不定，可以选择利用video的多源方案，在AVC的基础上额外提供对webm或ogg的支持：
<video poster="movie.jpg" controls>
<source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>
<source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'>
<source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
<p>This is fallback content</p>
</video>浏览器会根据自己的偏好来选择具体加载那种格式的流媒体文件，当然服务端必须对同一个视频提供多种格式的支持，具体可以这么做：
提供一个WebM的视频版本（VP8+Vorbis）
提供一个MP4的视频版本（H.264+AAC(low complexity)）
提供Ogg版本（Theora+Vorbis）
服务端推荐使用nginx，尽量注意MIME类型的配置正确
推荐学习：html视频教程
위 내용은 HTML에 음악 mp3를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!