이 기사는 HTML5 웹 음악 플레이어의 예제 코드를 소개하고 다음과 같이 모든 사람과 공유합니다.
1 기능 소개오디오 및 비디오 레이블은 HTML5에서 시작되므로 다른 플러그인의 도움없이 오디오 및 비디오를 직접 재생할 수 있습니다. 아래에서는 H5의 오디오 레이블과 관련 속성 및 방법을 사용하여 간단한 음악 플레이어를 만듭니다. 주로 다음 기능이 포함됩니다.
1. Play Plause, Last and Next
2. 볼륨을 조정하고 진행률 표시 줄을 재생하십시오
3. 목록에 따라 현재 노래를 전환하십시오
최종 효과를 살펴 보겠습니다.
이 음악 플레이어의 구조는 주로 노래 정보, 플레이어 및 재생 목록의 세 부분으로 나뉩니다. 플레이어에 3 개의 오디오 태그를 재생하기 위해 3 개의 오디오 태그를 넣으십시오.
<Udio id = music1> 브라우저는 오디오 태그를 지원하지 않습니다 <소스 src = 미디어/그 너머 -글로리스 년 .mp3> </source> </audio> <audio id = music2> 브라우저는 오디오 태그를 지원하지 않습니다 <소스 SRC = ME DIA/DANIEL POWTER -FREE LOOP.MP3> </source> </audio> <audio id = music3> 브라우저는 오디오 태그를 지원하지 않습니다 <소스 src = media/jay chou, fei yuqing- 수천 마일 떨어져 있습니다. MP3> < /source> < /audio>
다음 재생 목록은 세 가지 오디오 태그에 해당합니다.
<div id = playlist> <ul> <li id = m0> 그 이상의 만년 이후 </li> <li id = m1> Daniel Powter-Free 루프 </li> <li id = m2> Jay Chou, Fei Yuqing- 수천 마일 밖에서 </li> </ul> </div>
다음으로, 우리는 위에서 언급 한 기능을 점차적으로 인식하고 재생 버튼을 누르면 곡 진행 상황이 점차 증가해야합니다 재생 목록의 스타일도 그에 따라 변경됩니다.
기능을 수행하기 전에 먼저 3 개의 오디오 태그를 가져와 ID를 얻고 다음을 위해 배열에 저장해야합니다.
varmic1 = getElementById (music1);2 플레이 및 일시 중지 :
이제 재생 버튼의 기능을 완료하여 음악의 재생 상태를 표시 한 다음 배열 인덱스의 기본값을 설정할 수 있습니다.
그런 다음 재생 상태를 판단하고 해당 기능을 호출 한 다음 깃발의 해당 항목 스타일을 수정하십시오.
function playmusic () {if (flag && mlist [index] .paured) {mlist [index] .getelementById (m+index). .color = white (); 미디어/play.png);}}위의 코드에서 여러 기능이 호출됩니다. 이러한 기능이 어떻게 구현되는지와 어떤 기능이 해당하는지 살펴 보겠습니다.
3 진행률 바 및 재생 시간 :첫 번째는 진행률 표시 줄의 기능으로 노래의 전체 지속 시간을 얻은 다음 현재 재생 진행 상황과 진행률 표시 줄의 총 길이에 따라 진행률 표시 줄의 위치를 계산합니다.
functionbar () {var lenth = mlist [index] .duration; setInterval (function () {cur = mlist [index] .CurrentTime; yle.width =+parsefloat (cur/ lenth)*300+px; style.left = 60+parsefloat (cur/lenth)*300+px;}, 10)}}다음은 변경 시간 기능입니다. 여기서는 재생 시간을 변경하기 위해 시간 -시간 기능을 설정합니다. 우리가 얻는 기간은 몇 초로 계산되므로 if 문을 사용하여 시간을 변환 할 시간을 판단하고 재생 시간을 몇 초로 변경하여 표시해야합니다.
function playtimes () {timer2 = setInterval (function () {cur = parseint (mlist [index] .currenttime); // 초 var var minute = parseint (cur/60); if (minge <10) {if (cur% 60) <10) {playtime.innerhtml = 0+minute+: 0+cur%60+;} else {playtime.innerhtml = 0+minute+:+cur%60+;}} {if (cur%60 <10) {) { playtime.innertext = minute+: 0+cur%60+;} else {playtime.innertext = minute+:+cur%60+;}}, 1000);} 4 재생 진행 및 볼륨 조정 :다음으로 재생 진행의 진행 상황을 완료하고 진행률 표시 줄을 통해 볼륨 함수를 조정하겠습니다.
재생 진행 기능 조정 이벤트 객체를 사용하여 구현됩니다. 오프셋 속성에는 IE 이벤트 만 있으므로 IE 브라우저를 사용하여 효과를 보는 것이 좋습니다. 먼저 진행률 표시 줄에 이벤트를 추가하십시오. 진행률 표시 줄의 마우스를 클릭하고 마우스의 위치를 가져오고 진행률 표시 줄의 총 길이를 기준으로 현재 재생 진행 상황을 계산합니다.
// 재생 진행률 조정 Total.adeventListener (클릭, 함수 (이벤트) {var e = event || window.event; documenMousedown = function (event) {var e = event || wind varmvalue1 = mlist;다음은 볼륨 함수를 조정하는 것입니다. 드래그 위치에 따른 볼륨 막대는 계산에 따라 계산하여 결과가 볼륨을 곱하여 현재 볼륨을 얻습니다.
volbtn.adeventListener (Mousedown, function (event) {var e = event || winde var e = var mousepos2 = vol.scrollheight; 인덱스 문서. 5 송 스위치마지막으로, 더 복잡한 노래 스위칭 기능을 구현합시다.
먼저 전환을위한 이전 및 다음 버튼을 살펴 보겠습니다. 먼저 현재 연주되는 음악을 중지하고 다음 음악을 연주해야합니다. 재 계정; 셋째, 노래 정보가 변경되어야하며 플레이어 아래 플레이어의 재생 목록도 변경해야합니다. 위의 3시를 알아 낸 후에는 함수를 구현할 수 있습니다.
// 이전 노래 기능 prevm () {clear-interval (tar2); -1; .PROGITBAR (); } // ClearInterval (timer2); getElementColor = a71307; ();다음 코드는 목록을 클릭하여 노래를 전환하는 것입니다.
m0.onclice (timer1) (timer2); ) backgroundColor = a71307; } m1 = URL (media/pause.png) (); = URL (media/pause.png); 인덱스); ProgressBar ();
목록을 재생하여 노래를 전환하는 것은 버튼을 통해 전환하는 아이디어와 비슷하지만 해당 목록 항목에 따라 연주 해야하는 노래에 따라 설정됩니다.
아래의 노래의 기능이라는 몇 가지 방법이 있습니다.
첫 번째는 노래 정보를 전환하는 것입니다.
함수 changeinfo (index) {if (index == 0) {musicname.innerhtml = singer.innerhtml = beyond; {musicname.innerhtml = freee singer. } if (index == 2) {musicname.innerhtml = 수천 마일 떨어져 있습니다.그런 다음 두 타이머를 비우십시오.
// 진행률 표시 줄 0Function CleanProgress (Timer1) {if (timer1! = undefined) {clearinterval (timer1);} progress.style.width = 0;} 함수 Qingkong (timer2) {if (Timer2! = undefined) {clearinterval (timer2);}}재생 음악을 중지하고 재생 시간을 복원하십시오.
함수 stopm () {if (mlist [index] .played) {mlist [index] .pause (index] .currentTime = 0;마지막으로 다음 재생 목록의 스타일을 변경하십시오.
CLEARLISTBGC () {document.getElementColor = #e5e5e5; Style.backgroundColor = #e5 e5e5; getElementByID (m0) .color = black.getElementByid (m1) .color = black;이 시점에서 우리는 기본적으로 음악 플레이어를 완성합니다.
저자 : Jerry Education
출처 : http://www.cnblogs.com/jeehedu/
위는이 기사의 모든 내용입니다.