멋진 오디오 플레이어 만들기에 대한 HTML5 그래픽 튜토리얼plug-in

위 사진은 이 오디오 플레이어의 UI 인터페이스 다이어그램으로, 노래 재생 목록도 숨겨져 있습니다. 플레이어 UI 전체는 배경 초상화와 노래 별점을 제외하고는 모두 CSS와 글꼴로 그려져 있는데, 유일하게 어려워 보이는 부분은 CD 제작과 글꼴입니다. 디스크 플레이어에서 CD와 디스크 플레이어 모두 재생 중에 애니메이션 대화형 효과를 제공합니다. 이에 대해서는 나중에 설명하겠습니다. 플레이어에서 CD를 클릭하시면 재생목록이 열립니다~

이 튜토리얼은 주로 Html5의 새로운

주요 기능:

1. 재생, 일시정지, 이전곡, 다음곡, 볼륨 높이기 또는 낮추기

2. CD를 클릭하여 재생목록을 열고 닫으세요

3. 로컬 음악 파일을 플레이어로 드래그하여 재생할 수 있습니다

HTML 구조

코드 복사

코드는 다음과 같습니다.

< ;div id="myAudio" style="margin:0 auto;">

< /li>

a

< /span>

b

e
c d

0:00

0:00

오디오 태그

위 구조에서 이름에서 알 수 있듯이 컨트롤 속성이 있는 새로운 오디오 태그를 찾을 수 있습니다. 컨트롤 속성은 브라우저가 오디오에 대한 재생 컨트롤을 제공하도록 지정합니다. 크롬 브라우저에서와 같이

아래의 audio 태그에 이 속성을 설정하면 코드는 다음과 같습니다.

<오디오 컨트롤 src="xxx.mp3">

그러나 브라우저마다 오디오 태그의 렌더링 효과가 다르기 때문에 이 간단한 방법은 크로스 브라우저에서 사용하기에 적합하지 않으며 브라우저의 기본 플레이어 컨트롤에서 제공하는 기능이 실제로 너무 제한적입니다. . 따라서 우리는 일반적으로 이 속성을 설정하지 않음으로써 브라우저의 기본 재생 컨트롤을 숨기고 추가 태그와 스타일을 수동으로 추가하여 플레이어의 UI 인터페이스를 사용자 정의합니다.

재생 제어

플레이어의 UI 인터페이스가 그려진 후 가장 먼저 해야 할 일은 재생, 이전 노래, 다음 노래의 세 가지 주요 제어 버튼에 해당하는 이벤트 리스너를 추가하는 것입니다.

코드 복사

코드는 다음과 같습니다.

var myAudio = $(" #myAudio 오디오 ")[0];
var $sourceList = $("#myAudio source");
var currentSrcIndex = 0;
var currentSr = "";

코드 복사

코드는 다음과 같습니다.

$(".btn_play" ).click (function(){
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
} );
$(".btn_next").click(function(){
currentSrcIndex > $sourceList.length - 1 && (currentSrcIndex = 0);
currentSrc = $("#myAudio 소스" ).eq (currentSrcIndex).prop("src");
myAudio.src = currentSrc;
myAudio.play();
});
$(".btn_previous").click (function( ){
--currentSrcIndex < 0 && (currentSrcIndex = 0);
currentSrc = $("#myAudio source").eq(currentSrcIndex).prop("src");
myAudio.src = currentSrc;
myAudio.play();
});

위 버튼 클릭 이벤트 모니터링에서는 원본 오디오 요소의 play() 및 Pause() 메서드를 호출하여 오디오의 재생 및 일시 정지를 제어합니다. 또한 오디오 요소는 현재 재생 중인 파일의 파일 소스를 나타내는 currentSrc 속성을 제공합니다. 이 속성을 설정하여 현재 재생 중인 노래 트랙을 제어합니다.

볼륨 조절

다음으로 볼륨 바 양쪽에 있는 작은 스피커 2개에 이벤트 모니터링을 추가해 보겠습니다. 왼쪽과 오른쪽에 있는 작은 스피커 2개를 클릭하면 현재 재생 중인 볼륨을 줄이거나 늘릴 수 있습니다. 플레이어의 볼륨을 설정하려면 오디오 요소에 제공된 볼륨 속성을 호출하면 됩니다. 최대 볼륨 값은 1이고 최소 값은 0입니다. 여기서는 스피커를 클릭할 때마다 볼륨을 0.1씩 늘리거나 줄여 볼륨을 제어합니다. 물론 다른 값을 사용할 수도 있습니다. 하지만 자바스크립트 언어는 소수점 이하 자릿수에 대한 정밀한 제어를 제공할 수 없으므로 볼륨이 0.1씩 줄어들 때마다 실제 감소된 볼륨은 0.1보다 약간 더 크므로 볼륨 감소 버튼을 9번 클릭하면 0.09가 남게 됩니다. xxxx 볼륨을 연속으로 클릭하면 플레이어를 음소거할 수 없는 이유를 알 수 있습니다. . . 물론 이 문제는 쉽게 해결할 수 있습니다(아래 참조).

코드 복사

코드는 다음과 같습니다.

$(".volume_control . 감소") .click(function() {
var 볼륨 = myAudio.volume - 0.1;
볼륨 < 0 && (볼륨 = 0);
myAudio.changeVolumeTo(volume);
} );
$(".volume_control .increase").click(function() {
var 볼륨 = myAudio.volume 0.1;
볼륨 > 1 && (볼륨 = 1);
myAudio .changeVolumeTo(volume);
});

또한 슬라이더를 사용하거나 볼륨 바의 특정 위치를 클릭하여 볼륨을 제어하는 기능도 구현해야 합니다. 위의 기초는 완료하기 쉽습니다. 먼저, 볼륨 바의 특정 위치를 클릭하여 볼륨을 조절하는 기능을 살펴보겠습니다. 볼륨 바의 특정 위치를 클릭하고, 볼륨 바의 시작점에서 해당 위치까지의 길이 값을 계산한 다음, 이 값을 볼륨 바의 전체 길이로 나눕니다. (여기서는 100입니다.) 백분율 값을 얻은 다음 백분율 값에 최대 볼륨 값 1을 곱하여 점프하려는 볼륨 값을 얻은 다음 할당합니다. 용량. 슬라이더를 통해 볼륨을 조절하는 방법도 이와 유사합니다. 가장 중요한 것은 볼륨 바에서 슬라이더의 위치 값을 계산하는 방법을 아는 것입니다. 여기서는 자세히 설명하지 않겠습니다. 궁금한 점이 있으면 아래에 메시지를 남겨주세요.

코드 복사

코드는 다음과 같습니다.

$(".volume_control .base_bar").mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().left;
var 볼륨 = (posX - targetLeft)/100;
볼륨 > 1 && (볼륨 = 1);
볼륨 < 0 && (볼륨 = 0);
myAudio.changeVolumeTo(볼륨 );
});
$(".volume_control .slider").mousedown(starDrag = function(ev) {
ev.preventDefault();
var origLeft = $(this). position().left; /*슬라이더의 초기 위치*/
var origX = ev.clientX; /*마우스의 초기 위치*/
var target = this;
var Progress_bar = $(". Volume_control .progress_bar")[0];
$(document).mousemove(doDrag = function(ev){
ev.preventDefault();
var moveX = ev.clientX - origX; /*계산 mouse 이동 거리*/
var curLeft = origLeft moveX; /*마우스로 이동한 거리를 사용하여 슬라이더의 이동 거리를 나타냅니다.*/
(curLeft < -7) && (curLeft = -7) ;
(curLeft > 93) && (curLeft = 93);
target.style.left = curLeft "px";
Progress_bar.style.width = curLeft 7 "%";
myAudio .changeVolumeTo(( curLeft 7)/100);
});
$(document).mouseup(stopDrag = function(){
$(document).unbind("mousemove",doDrag);
$ (document).unbind("mouseup",stopDrag);
});
});

시간조절

자, 이제 플레이어는 기본적으로 작동하지만 오디오의 일부를 특정 시점으로 직접 건너뛸 수도 싶습니다. 그렇다면 그것을 달성하는 방법은 무엇입니까? ? ! 표준을 만드는 위원들은 바보가 아닙니다. 이렇게 자주 사용되는 기능은 생략할 수 없습니다. 따라서 API를 빠르게 탐색하면 오디오 요소가 매우 간결하고 이해하기 쉬운 이름인 currentTime이라는 속성을 제공한다는 것을 알 수 있습니다. (사실 대부분의 속성은 이해하기 쉽습니다.) 이 속성을 설정하면 현재 재생 시점을 설정할 수 있습니다.

여기서 오디오의 또 다른 속성인 지속 시간도 사용해야 합니다. 지속 시간은 현재 재생 중인 파일의 전체 시간 길이를 나타냅니다. 따라서 볼륨 제어 구현에 따라 다음과 같이 할 수 있습니다.

1. 진행률 표시줄의 특정 위치를 클릭하고 진행률 표시줄의 시작점부터 해당 위치까지의 길이를 진행률 표시줄의 전체 길이에 대한 백분율 값을 계산합니다(예: 중간 위치를 클릭). 진행률 표시줄의 시작점에서 해당 위치까지의 길이는 전체 진행률 표시줄 길이의 50%를 차지하며 백분율로 기록됩니다.

2. 그런 다음 백분율에 파일의 전체 지속 시간을 곱하여 점프하려는 시점의 값을 얻은 다음 해당 값을 currentTime에 할당하여 구현할 함수를 완료합니다.

코드 복사

코드는 다음과 같습니다.

$(".time_line . base_bar") .mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().left;
var 백분율 = (posX - targetLeft)/ 140 * 100 ;
myAudio.currentTime = myAudio.duration * 백분율 / 100;
});

이 시점에서 플레이어는 기본적으로 형태를 갖추었습니다. 아직 미미한 UI 상호작용 구현이 남아있습니다(사실 저한테는 이게 가장 중요하네요 ㅎㅎ). 궁금하신 점은 소스코드에서 확인하실 수 있습니다. 우리가 더 많이 소통하고 배울 수 있기를 바랍니다.