> 웹 프론트엔드 > JS 튜토리얼 > bgsound 배경음악의 일반적인 방법과 특별한 사용법 요약_기본 지식

bgsound 배경음악의 일반적인 방법과 특별한 사용법 요약_기본 지식

WBOY
풀어 주다: 2016-05-16 18:27:42
원래의
1413명이 탐색했습니다.

며칠 전, QQ 그룹의 XD 누군가가 bgsound에 대한 정보, 특히 특별한 사용법에 대해 질문했습니다. 저를 포함해 그룹 내에서 새로운 말을 할 수 있는 사람이 거의 없다는 것이 이상합니다! 아마도 이 라벨은 일반적으로 사용되지 않거나 그다지 유용하지 않기 때문에 모두가 의도적으로 배경 음악을 연구하지 않았을 것입니다. (이런거 예전에 혼자 가르쳤을땐 그냥 호기심에 재미삼아 한거였어요^_^)
말도 안되는 소리는 그만하고 본격적으로...

(아래는 원문입니다) , bgsound 뿐만 아니라 다른 것도 있으니 천천히 봐주세요)

는 배경음악을 삽입하는 데 사용되는데 IE에만 ​​적용 가능하고 매개변수 설정도 많지 않습니다.


src="your.mid"
상대적일 수 있는 midi 또는 mp3 파일 및 경로 설정 전적으로.
autostart=true
음악 파일 전송 후 자동으로 음악을 재생할지 여부입니다. 그렇다면 true, 아니오이면 false(기본값)입니다.
loop=infinite
자동으로 반복 재생할지 여부입니다. LOOP=2는 두 번 반복됨을 의미하고, Infinite는 여러 번 반복됨을 의미합니다.
WMP와 Real은 각각 전용 가사 표현 형식이 있고, 둘 다 공통되는 가사 표현 형식도 있습니다. WMP 전용 가사 표현 형식은 *.SMI 파일을 통해 구현되고, Real 전용 가사 표현 형식은 *.RT 파일을 통해 구현되며, 둘 다 공통적인 가사 표현 형식은 *.LRC 파일이다.

SMI 가사 파일

재생 버튼을 눌러 효과를 감상해주세요. (버퍼링 현상이 있어 모두 잠시 기다려야 합니다.) 매우 편리한 SMI 파일 생성용 특수 소프트웨어가 있습니다. 이 방법은 나중에 자세히 설명하겠습니다. 한 줄, 여러 줄의 가사, 노래방 등의 특수 효과를 구현할 수 있습니다. SMI 가사는 실제로 WMP의 자막 속성을 사용하여 구현됩니다.


코드는 다음과 같습니다.

코드를 복사합니다 코드는 다음과 같습니다.


<테이블 높이=100 너비=200 테두리=3 테두리 색상=파란색>

<글꼴 색상 =olive size=2>SMI 데모








()
{
aboutplayer.closedCaption.CaptioningID = "CapText";
aboutplayer.closedCaption.SAMIFileName = "http://lrc.aboutplayer.com/goodbye.smi"
aboutplayer. URL = "http://www.shijiren.net/wma/g00146001/g0014600101.wma";;
aboutplayer.controls.play()
}
function Stop()
{
aboutplayer.controls.stop();
}



문제의 핵심은 다음 세 문장입니다.

aboutplayer. ClosedCaption.CaptioningID = "CapText";

// 웹페이지에 가사가 표시되는 위치 ID

aboutplayer.closedCaption.SAMIFileName = http://lrc.aboutplayer.com/goodbye. smi

// SMI 가사 파일 주소

aboutplayer.URL = http://www.shijiren.net/wma/g00146001/g0014600101.wma; 미디어 파일 주소

는 .controls.play(); 앞의 aboutplayer에 배치됩니다. 그 중 SMI 파일 주소는 절대 주소를 사용하는 것이 가장 좋습니다(미디어 파일 주소가 절대 주소인지 상대 주소인지에 따라 다름). 미디어 파일과 SMI 파일의 공통 이름이 동일한 경우 SMI 파일 주소를 생략할 수 있습니다.

위 내용은 단일 가사 재생의 예일 뿐입니다. SMI 가사 연속 재생의 클래식 버전은 Pu Music에서 제작한 BBSVisual For SMI를 참조하세요.

RT가사파일

재생버튼을 눌러 효과를 감상해주세요. RT 가사 파일은 한 줄씩 또는 단어별로 동기화할 수 있습니다. 다음은 단어별 동기화에 대한 데모입니다.

코드는 다음과 같습니다.




코드를 복사하세요

코드는 다음과 같습니다.














가사와 음악을 동시에 구성하는 방식을 '정밀 가이드'라고 합니다. 라는 문구가 나타납니다. 재생이 정확하게 동기화되었습니다. "온라인 노래방"은 음악을 작곡하는 최초의 창의적인 방법으로 다양한 형태의 표현을 실현합니다.

LRC 가사 파일

LRC 가사도 "정확한 안내"를 얻을 수 있습니다. 구체적인 효과는 http://aboutplayer.com/bbsvisual을 참조하세요. "단어별로 색상을 변경할 수 있습니다. ", 정말 기분이 좋아요. 그러나 이러한 '정밀 유도' 가사 파일을 제작하는 것은 시간과 노력이 많이 들고 홍보와 적용이 편리하지 않습니다. 이를 위해 Pule은 웹 페이지에서 자동으로 "단어별로 색상을 변경"할 수 있는 플레이어 BBSVisual을 개발했습니다. 데모 주소: http://qq.aboutplayer.com.

LRC 가사는 범용 가사 파일로 널리 사용되고 있으며, 인터넷 여러 곳에서 다운로드 받을 수 있습니다(Pu 음악 가사 검색 및 다운로드 http://lrc.aboutplayer.com). 다음은 "Pan Yueyun - Wild Lily also has spring.lrc" 가사 파일의 내용입니다:
코드 복사 코드

[ti: 들꽃에도 봄이 있다] // 곡명
[ar: Pan Yueyun] // 가수
[al: Unique] // 앨범명
[la:zh] / / 언어 카테고리
[by:puyue] // 가사 컴파일러
[offset:500] // 시간 매개변수(양수는 전체 진행을 나타내고 음수는 전체 지연을 나타냅니다. 이 웹페이지에 선언문을 작성하여 달성)
[00:00.00]판웨윤-들나리에게도 봄이 있습니다
[00:05.50www.aboutplayer.com
[01:21.05][00:07.14 ]꿈인 듯
[01:24.52 ][00:10.42]너무 짧게 만났어요
[01:28.55][00:14.09]내 마음에 살며시 불어오는 봄바람 같은 그대
[01:35.69][00:21.58]지금 어디야 과거의 너의 미소는 어디에나 있어
[01:43.01][00:29.10]내 기억 속에 익숙한 미소
[02:18.93] [01:49.26][00:35.40]내가 당신을 사랑하는 걸 아시나요? 당신을 향한 당신의 사랑은 절대 변하지 않을 거예요
[02:27.36][01:57.61][00:43.62]뒤돌아보지 마세요 그리고 어제 했던 서약을 생각해보세요
[02:34.57][02:04.90][ 00:51.04]물가에 핀 아름다운 수선화를 그리워하더라도
[02:42.00][02:12.16] [00:58.54]외로운 계곡 모퉁이 들백합에도 봄이 있다는 걸 잊지 마세요
[01:08.54 ]음악칼럼
[02:48.65]라...... ..La........La... .

앞은 가사의 등장 시간으로, 시간 배열 Time(1), Time( 2)... 마지막 부분은 가사 콘텐츠로, 가사 배열 Txt(1), Txt(2)...로 구성될 수 있습니다. LRC 가사 파일의 작동 메커니즘은 "순간 판단을 통해 노래 재생 시간이 Time(1)에 도달하면 가사 Txt(1)이 표시됩니다."입니다. Txt(1) "색상 변경"의 시간 알고리즘은 (Time(2) - Time(1)) / Txt(1).Length입니다. 이것으로 "가사 동기화" 음악에 대한 튜토리얼이 끝났습니다. 자세한 작업 과정은 음악 음악 포럼에서 소스 코드를 다운로드하여 공부하시기 바랍니다.

마지막으로 가사 제작을 위한 보조 소프트웨어 2종을 소개합니다. LRC2SMI: LRC 파일을 SMI 파일로 편리하게 변환합니다. "정밀 지침": 정확한 "단어별 색상" LRC 가사 파일을 생성합니다. Pule 포럼은 다운로드만 제공합니다.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

일반 웹 플레이어:


코드 복사 코드는 다음과 같습니다.

src: 음악 파일의 경로 및 파일 이름
autostart: true는 음악 파일이 업로드된 후 자동으로 재생을 시작함을 의미하며 기본값은 false(아니요)
loop: true는 무제한 재생을 의미합니다. , false는 재생 없음을 의미, 특정 특정 값(정수)은 재생 횟수입니다.
volume: 값 범위는 "0-100"이며, 볼륨을 설정하며, 기본값은 시스템 자체 볼륨입니다.
starttime : "분:초", 노래 재생 시작 시간 설정 starttime="00:10"과 같은 시간, 10번째부터 재생 시작
endtime: "분:초", 노래 재생 시작 시간 설정 노래 재생 종료
width: 제어판의 너비
height: 제어판의 너비
controls: 제어판의 모양
controls="console/smallconsole/playbutton/pausebutton/stopbutton /volumelev"
·콘솔: 일반 크기 패널
·소형 콘솔: 더 작은 패널
·재생버튼: 재생 버튼 표시
·일시 중지 버튼: 일시 중지 버튼 표시
·중지 버튼: 표시 정지 버튼
·volumelever: 볼륨 조절 버튼 표시
hidden: true인 경우 패널을 숨길 수 있습니다


코드 복사 코드는 다음과 같습니다.

<스크립트 언어=javascript defer>
var volv=phx.settings.volume;
setInterval("if(phx.playState==3){time.innerText=phx.controls.currentPositionString '|' phx.currentMedia.durationString}",1000);
setInterval("if(phx.playState==3){itcn.style.width=parseInt(245*(phx.controls.currentPosition/phx.currentMedia.duration))}",1000);
함수 volup(){
if (volv<100){
volv =5;
phx.settings.volume=volv;
time.innerText=volv;}
else{time.innerText='最大';}
}
function voldown(){
if (volv>0){
volv -=5;
phx.settings.volume=volv;
time.innerText=volv;}
else{time.innerText='最小';}
}































<입력 유형=버튼 값=음소거 onclick=phx.settings.mute=phx.settings.mute==true?false:true;time.innerText=phx.settings.mute==true?'静音': '关闭静音';>
<입력 유형=버튼 값=재생 onclick=phx.controls.play();time.innerText='播放';>
<입력 유형=버튼 값=pause onclick=phx.controls.pause();time.innerText='暂停';>
<입력 유형=버튼 값=stop onclick=phx.controls.stop();time.innerText='停止';>
<입력 유형=버튼 값=모드 onclick=phx.settings.balance=phx.settings.balance=='100'?'-100':'100';time.innerText=phx.settings.balance= ='100'?'右声道':'左声道';>
<입력 유형=버튼 값=vol onclick=volup();>
<입력 유형=버튼 값=vol-- onclick=voldown();>




复代码 代码如下:

<스크립트 언어=javascript defer>
var volv=phx.settings.volume;
setInterval("if(phx.playState==3){time.innerText=phx.controls.currentPositionString '|' phx.currentMedia.durationString}",1000);
setInterval("if(phx.playState==3){itcn.style.width=parseInt(245*(phx.controls.currentPosition/phx.currentMedia.duration))}",1000);
함수 volup(){
if (volv<100){
volv =5;
phx.settings.volume=volv;
time.innerText=volv;}
else{time.innerText='最大';}
}
function voldown(){
if (volv>0){
volv -=5;
phx.settings.volume=volv;
time.innerText=volv;}
else{time.innerText='最小';}
}





























<입력 유형=버튼 값=음소거 onclick=phx.settings.mute=phx.settings.mute==true?false:true;time.innerText=phx.settings.mute==true?'静音': '关闭静音';>
<입력 유형=버튼 값=재생 onclick=phx.controls.play();time.innerText='播放';>
<입력 유형=버튼 값=pause onclick=phx.controls.pause();time.innerText='暂停';>
<입력 유형=버튼 값=stop onclick=phx.controls.stop();time.innerText='停止';>
<입력 유형=버튼 값=모드 onclick=phx.settings.balance=phx.settings.balance=='100'?'-100':'100';time.innerText=phx.settings.balance= ='100'?'右声道':'左声道';>
<입력 유형=버튼 값=vol onclick=volup();>
<입력 유형=버튼 값=vol-- onclick=voldown();>
<입력 유형=버튼 값=전체 화면 onclick="if(phx.playState==3)phx.fullscreen=1;">


정재加载媒体。。。







各种播放器代码
1.avi格式
复主代码代码如下:

















2.mpg格式
复代码 代码如下:

< object classid="clsid:05589FA1-C356-11CE-BF01-00AA0055595A" id="ActiveMovie1" width="239" height="250">































3.smi格式
复代码 代码如下:


















4.rm格式
复主代码 代码如下:



















5.wmv格式
复代码 代码如下:







































6.wma格式
[코드]











[html]
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿