웹음악플레이어 (html5 및 자바스크립트 기반) > 퍼블리셔팁

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

웹음악플레이어 (html5 및 자바스크립트 기반) 정보

레이아웃 웹음악플레이어 (html5 및 자바스크립트 기반)

첨부파일

DooliMusic.tar (19.2M) 39회 다운로드 2023-06-09 22:13:25

본문

실수로 스크린샷 새로올리다 건들지말아야할

파일첨부 해둔곳에 올리는 바람에 재등록

했는데 누적 다운로드수도 초기화 된다는걸

깨달았네요... 누굴원망 하오리까 ㅠ_ㅠ

 

## 저작권 문제로 테스트 음악 변경했습니다.

 

웹서핑하다 오픈소스로 배포해둔걸 다운받아 약간 고쳐서 사용하다.

제홈페이지에서 가끔씩 음악듣고싶을때 듣는건데 그누 회원분들께서

필요한분이 계실까해서 올려봅니다.

 

자료받아가실때 추천좀 부탁드립니다 ㅠ____ㅠ

댓글도 남겨주시면 저에게 큰 힘이됩니다 부탁드려요!!

 

--------------------------------------------------------------------------------------

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 부분을 원하시는 폴더명으로 똑같이 변경해 주시면 됩니다.

추천
19

댓글 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
별거없는데요 제가만든것도 아니고 원래있던것 사용하시기 편하도록 조금손본것 뿐이에요 ... 조만간 새로운 버전으로 다시 찾아뵐께요 ^^
행복한 하루 되세요 소시님... 감사합니다 ^^
예전에 올린것들이 몇몇있어요 원래 Jplayer의 오픈파일이었는데 그누회원 몇몇분들께서 조금씩 업그레이드 해주셔서 지금까지 온겁니다 ^^ 잘사용하시고 계시다니 제가 감사합니다 ^^ 다음버전도 준비중인데 이건좀 어려워서 진도가 안나가네요 조금만 기다려주시면 좀더보완해서 올려드리겠습니다 ^^ 좋은하루되세요 감사합니다.
어려우면 안되죠 저처럼 초보자분들이 사용하시기 난감하니 ㅎㅎ;; 설치랄것도없습니다 그냥 올려놓고 인덱스 불러오면 끝 ㅎㅎ 감사합니다 좋은하루되세요 ^^
철용님이 더 대단하시죠 이렇게 철용님처럼 필요한분이 계셔야 이런것도 만들어 지는거니까요 그래서 철용님이 더 대단하신겁니다 ^^ 조만간 다른버전으로 찾아올께요 좋은하루되세요 감사합니다 ^^
제가 요즘 할일없이 바쁜관계로 신경을 못쓰고있네요 ㅠㅠㅠㅠ
좀더알아보고 답변드릴께요 ...주말 잘보내세요 ^^
전체 1,264
퍼블리셔팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT