JavaScript는 오디오 제어 진행률 표시줄을 구현합니다.

서문: 숙제 같은 일을 하기 위해 HTML5, CSS, JavaScript를 사용하는 방법을 방금 배웠습니다. 음.. 하지만 빠른 속도 수준에 불과하기 때문에 여전히 문제가 많아서 사용법을 기록하기로 했습니다. 인터넷에서 찾거나 이해하기 어려운 내용을 나중에 참고할 수 있도록 보관하고 동일한 문제를 겪는 사람들에게 참고가 되기를 바랍니다.

이 블로그에서는 주로 JS를 사용하여 직접 만든 간단한 오디오 진행률 표시줄을 구현하는 방법과 재생 점프 및 재생 시간 변경에 대해 설명합니다. 그 이유는 브라우저에 내장된 컨트롤(Firefox를 사용하고 있음)이 내 페이지 스타일에 맞지 않는다고 느끼기 때문입니다.

Firefox에서는 다음과 같습니다.

작업을 마친 후에는 다음과 같습니다.

사실 진행률 표시줄의 아이디어는 매우 간단합니다. 전체 길이가 있어야 하고 그 다음에는 전체 길이가 있어야 합니다. 색상과 너비를 제외하고 동일한 항목(예: 여기에는 두 개의 가는 직사각형)을 동일한 시작 위치에 배치한 다음 오디오가 재생될 때 지정된 기간(밀리초 포함)에 따라 함수 또는 계산 표현식을 호출할 수 있는 setInterval 함수는 매초마다(물론 1초가 아닌 경우 후속 계산에서 변경하는 것을 잊지 마십시오) 진행 표시줄이 비례하여 처음부터 0부터 끝의 전체 길이까지 간단한 진행 표시줄이 완성됩니다.

setInterval 메소드는 여기를 참고하세요

진행 표시줄을 마우스로 클릭하여 오디오 재생을 변경하려면 마우스 좌표를 알아야 합니다. 일반적인 개념은 마우스가 진행률 표시줄의 p 영역을 클릭할 때만 마우스의 좌표를 얻는 것입니다. 따라서 얻은 x 좌표에서 CSS에 지정된 진행률 표시줄의 시작 x 좌표(가장 왼쪽)를 뺍니다. 진행률 표시줄)은 마우스 클릭 위치입니다. 진행률 표시줄의 시작 부분부터의 길이입니다. 이 길이를 전체 진행률 표시줄 길이로 나누고 오디오의 전체 지속 시간을 곱합니다. 그런 다음 audio의 fastSeek 기능을 사용하여 점프하세요.

관련 CSS&HTML&JS 코드는 아래에 나열됩니다. JS의 사용은 명확한 이해를 위해 단지 참조용으로만 사용됩니다.

코드에 언급된 것은 마우스의 x 좌표만 얻으면 된다는 것입니다. 왜냐하면 여기에 구현된 진행률 표시줄은 매우 간단하고 수평으로만 확장되므로 x 방향으로만 계산할 수 있기 때문입니다. 수직인 경우 방향 진행률 표시줄에는 y 좌표만 필요합니다. 원형 진행률 표시줄인 경우 두 가지 좌표가 모두 필요할 수 있습니다.

위 내용은 JavaScript는 오디오 제어 진행률 표시줄을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!