웹음악플레이어 (html5 및 자바스크립트 기반)
실수로 스크린샷 새로올리다 건들지말아야할
파일첨부 해둔곳에 올리는 바람에 재등록
했는데 누적 다운로드수도 초기화 된다는걸
깨달았네요... 누굴원망 하오리까 ㅠ_ㅠ
## 저작권 문제로 테스트 음악 변경했습니다.
웹서핑하다 오픈소스로 배포해둔걸 다운받아 약간 고쳐서 사용하다.
제홈페이지에서 가끔씩 음악듣고싶을때 듣는건데 그누 회원분들께서
필요한분이 계실까해서 올려봅니다.
자료받아가실때 추천좀 부탁드립니다 ㅠ____ㅠ
댓글도 남겨주시면 저에게 큰 힘이됩니다 부탁드려요!!
--------------------------------------------------------------------------------------
PHP파일이 아니라 html5+Javascript 기반 파일입니다. 웹서버 적당한곳에 폴더째 올리신후
ex:) http://내홈페이지주소/dlplayer 처럼 불러오시면 됩니다.
웹서버에 저장된 음원만을 불러오며 링크방식은 지원하지 않습니다.
음원을 링크방식으로 수정해서 사용하실분은 사용해도 무관하나
수정 완료되시면 공유좀 부탁드립니다. ^^
홈페이지에 클릭시 새창출력으로 넣고싶을땐 dlplayer 의 팝업설명서 참고하시면 됩니다.
속성을 참고해주세요
음악추가는 dlplayer/js/music-list.js 를 에디터로 여신후
13번줄과 18번줄 사이의 아래 항목에서 원하시는 곡명으로 바꿔주시면 됩니다.
현재 5곡까지 지정했는데 이후 더 추가하시고 싶으실경우 13번과 18번사이줄을
복사한후 하단에 붙여넣기 하신후 추가하시면 됩니다.
파일명앞에 반드시 동일한 파일명으로 시작해야 합니다.
이미지 파일 이름도 반드시 파일명과 동일해야 합니다.
예: play_list01, play_list02, play_list03 등...
예: play_list01.jpg, play_list02.jpg, play_list03.jpg 등...
{
name: "노래제목",
artist: "가수이름",
img: "play_list01", // images 폴더내 그림파일명 (.jpg 확장자명은 쓰지마세요)
src: "play_list01" // songs 폴더내 재생할 파일명 (.mp3 확장자명은 쓰지마세요)
},
음악파일은 dlplayer/songs 폴더에 저장하시면 되고
음악재생시 출력될 포스터(이미지) 파일은
dlplayer/images 에 저장하시면 됩니다.
재생시 포스터의 크기는 상관없으나 318x262로 이미지를 저장하시면
최적화된 크기로 출력됩니다.
반드시 주의하셔야할게 음악파일명과 포스터 이미지 파일명은 항상 같아야 합니다.
음악파일 폴더와 포스터(이미지)폴더는 원하시는 폴더명으로 바꿀수 있지만
그냥사용하셔도 무관할듯 합니다.
그래도 난 바꾸고 싶다 하는분께선 dlplayer/js 폴더내
script.js 를 에디터로 여신후
26번줄 musicImg.src = `images/${allMusic[indexNumb - 1].src}.jpg`;
27번줄 mainAudio.src = `songs/${allMusic[indexNumb - 1].src}.mp3`;
위 두곳을 원하시는 폴더명으로 변경해 주시고
음원을 추출해서 플레이어 리스트에 뿌려주는곳이 한곳 더있습니다.
186번줄 <audio class="${allMusic[i].src}" src="songs/${allMusic[i].src}.mp3"></audio>
위 src="songs 부분을 원하시는 폴더명으로 똑같이 변경해 주시면 됩니다.
댓글 30개
웹서버에 저장된 음원만 불러올수 있어요
유튜브 플레이어는 jplayer를 수정한 버전이
있으니 필요하시면 아래 링크를 확인해보세요
https://sir.kr/g5_skin/31638?sfl=wr_subject%7C%7Cwr_content&stx=%EC%9C%A0%ED%8A%9C%EB%B8%8C+%ED%94%8C%EB%A0%88%EC%9D%B4%EC%96%B4+%EC%88%98%EC%A0%95%EB%B3%B8
이번 올려주신거 너무 이뻐요. 노래 선곡, 이미지, 디자인 넘흐나 이뻐요 :)
행복한 하루 되세요 소시님... 감사합니다 ^^
[http://sir.kr/data/editor/2306/9e44a65725ee3b1c55ba3f8894b3dd11_1686186669_0831.png]
^^
감사합니다.
좀더알아보고 답변드릴께요 ...주말 잘보내세요 ^^
WARNING!
eunsolee.com has expired.
게시글 목록
| 번호 | 제목 |
|---|---|
| 3643 | |
| 3631 | |
| 3627 | |
| 3621 | |
| 3619 |
HTML
스크롤다운시 모션효과
|
| 3617 | |
| 3610 |
HTML
간단한 FLEX 예제
|
| 3609 |
HTML
간단한 반응형 페이지 레이아웃
1
|
| 3608 |
HTML
간단한 Flex 활용 예제
1
|
| 3607 | |
| 3606 | |
| 3603 | |
| 3602 | |
| 3601 | |
| 3600 | |
| 3595 | |
| 3591 | |
| 3587 | |
| 3578 | |
| 3567 | |
| 3561 |
웹접근성
웹 표준 검사하기
|
| 3560 |
반응형
반응형을 위한 미디어쿼리
2
|
| 3559 | |
| 3557 | |
| 3555 | |
| 3554 |
CSS
body 외부 정렬
|
| 3552 | |
| 3551 |
CSS
flex 레이아웃
1
|
| 3550 | |
| 3537 |
기타
howler.js
2
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기