웹 클론코딩을 함으로써 코드 이해력과 응용력을 기르려고 주제를 찾아보던중 간단한 음악 플레이어를 만들고자 하였습니다
자바스크립트부분은 아직 많이 미흡하여 기존에 있는 음악 재생구현부분을 가져다가 부가기능을 추가하거나 구현하고자하는 내용은 구글링을 많이 하였습니다
해당사이트는 데스크톱 환경에 맞추어 제작되었습니다
버튼이 작동하지않거나 스크립트부분에서 자잘한 오류들을 고치고 위와같은 사이트를 제작하였습니다
웹 이미지파일을 가져왔지만 이미지도 음악부분도 저작권을 피해갈순 없어서 개인 사이트 제작용도로만 사용하였습니다 비상업적 용도이지만 저작권 당사자로부터 삭제요청이 있을경우 해당소스 삭제하겠습니다
현재까지 작동되는 기능은 리플레이 이전,다음곡 재생 플레이리스트 재생목록 보기와 볼륨조절까지 가능합니다
음악자체는 제가 좋아하는 ZUTOMAYO의 앨범들을 골랐습니다
웹에서 호스팅할때 프로젝트 하위 디렉토리에 이미지파일들이 있는데 나중에 이부분은 웹에 따로 소스파일을 올려두어서 불러올수있도록 개선하고자합니다
플레이리스트 재생목록 아이콘을 누르면 현재 담겨져있는 플레이리스트의 음악을 확인하실수 있습니다
웹사이트
Music Playlist
일본음악 Coding is so easy 0:00 0:00 repeat skip_previous play_arrow skip_next queue_music volume_off volume_up
mainplay-list.netlify.app
깃허브
GitHub - Blue-B/playlist
Contribute to Blue-B/playlist development by creating an account on GitHub.
github.com
참고강좌
https://www.youtube.com/watch?v=oscPp3KghS8
https://www.youtube.com/watch?v=TdVNa7HPuZU&list=WL&index=327
'프로그래밍 > HTML, PHP, CSS' 카테고리의 다른 글
| 코드 한줄로 자신의 웹사이트에 지렁이게임을 추가하는법 (1) | 2022.12.15 |
|---|---|
| 자바스크립트(JavaScript) 매트릭스 효과 (3) | 2022.12.11 |
| div요소에 세로 스크롤바 넣는법 (1) | 2022.12.03 |
| [html]css :root 가상 클래스를 통해 div색상 변경하기 (3) | 2022.11.21 |
| 내 웹사이트에 IDE 온라인 컴파일러 추가하는법 (코드 5줄) (2) | 2022.11.18 |
| PHP $_SERVER 함수 정리 (0) | 2022.09.18 |
| HTML 일본어 학습 사이트 개발일지 - 1 (2) | 2022.09.18 |
