이 튜토리얼은 주로 html5에 새로운 추가 사항을 보여주기위한 것입니다.
위의 그림은이 오디오 플레이어의 UI 인터페이스이며 노래의 재생 목록을 숨 깁니다. 큰 배경의 초상화 이미지와 노래의 별 등급을 제외하고 전체 플레이어의 UI는 사진을 사용하고 CSS와 글꼴을 사용하여 그려집니다. 어려운 것처럼 보이는 유일한 것은 CD와 디스크의 생산입니다. 노래가 재생되면 CD와 디스크 모두 애니메이션 상호 작용 효과가 있습니다. 이것은 후반에 설명 될 것입니다. 플레이어의 CD를 클릭하여 재생 목록을 열 ~
이 튜토리얼은 주로 HTML5에 추가 된 새로운 <audio> 태그 및 오디오 요소의 DOM API 사용을 보여주기 때문에 플레이어 UI의 드로우는 여기에서 자세히 설명되지 않습니다. 궁금한 점이 있으면 사례의 CSS 파일의 의견을 직접 보거나 아래 메시지를 남길 수 있습니다.
주요 기능 :1. Play, Pause, 이전 노래, 다음 노래, 볼륨 증가 및 감소
2. CD를 클릭하여 재생 목록을 열고 닫습니다.
3. 로컬 음악 파일을 플레이어로 드래그하여 재생할 수 있습니다.
HTML 구조
코드를 복사하십시오