미니 웹 음악 플레이어 LP player Music (LPM) > 퍼블리셔팁

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

퍼블리셔팁

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

미니 웹 음악 플레이어 LP player Music (LPM) 정보

레이아웃 미니 웹 음악 플레이어 LP player Music (LPM)

첨부파일

lpm.tar (13.5M) 20회 다운로드 2023-06-09 20:15:31

본문

안녕하세요 두리삼촌입니다. ^^

먼저 자료소개를 간략히 하자면 스킨파일은 아니고 및및한 웹사이트에

음악을 더할수 있는 플레이어라는 말씀을 드립니다.

 

플레이어를 실행하면 맨처음 리스트 목록이 나옵니다.

왼쪽의 플레이 버튼을 누르면 재생되며 상위 중앙의 곡제목을 클릭하면

메인 포스터 화면으로 넘어갑니다.

포스터 화면에서 다음이나 이전버튼을 클릭시 다음포스터로 스크롤됩니다

포스터 화면에서 현재 재생중인 곡이 끝나면 다음곡 포스터가 스크롤 됩니다.

플레이 리스트로 다시 돌아갈땐 포스터 화면 상단 왼쪽의 三 버튼을 클릭하세요 ^^

플레이 리스트에서 제목이나 가수이름등이 길어질경우 플레이 리스트

상단에서 스크롤 됩니다.

곡선택시 각각 다른 메인페이지로 색상전환 가능하나 불필요할듯하여 이부분은 삭제했습니다.

이 부분이 필요하신분은 댓글남겨 주세요 ^^

 

설치방법이라고 말할것까진 없는 매우 단순한 html+java로 제작된 플레이어 입니다.

해당 플레이어는 오픈소스 (Free Source) 로 자유로이 공유된 파일을

사용자가 좀더 쉽고 편리하게 이용할수 있도록 일부 수정한 것임을 말씀드립니다.

 

Update 및 Edit는 제가 맞지만 

Design은 제가 아님을 미리 밝혀드립니다.

 

상위 lpm.tar 파일을 다운받아 압축해제후

ex:) http://내홈페이지경로.net/lpm 에 압축해제한 폴더를 통째로 올려주세요

홈페이지에 메뉴방식으로 넣고싶을경우

폴더내 popup.html 을 에디터로 열어 확인해주세요.

 

아래는 적용한 팝업태그 입니다.

<a href="#" onclick="window.open('index.html','_blank', 'width=375, height=391, toolbar=no, menubar=no, scrollbars=yes, resizable=yes');" onfocus="this.blur()"><p align="center" size="h4">

width=375, height=391 // 현재 플레이어를 팝업으로 열었을때 가로와 세로크기 입니다.

 

다음은 음악을 추가하는 방법입니다.

index.html 을 에디터로 열고 아래부분을 찾아 복사하신후

적당한 위치에 붙여넣기 하시고 원하시는 경로로 수정해 주세요

 

<!-- 플레이어 리스트에서 곡명을 클릭하면 보여지는 메인화면 포스터 출력 부분입니다. -->

31번줄 

<img class="img slider__img" src="img/playlist_02.jpg" alt="고원기 - 괜찮아">

 

 

<!-- 음악을 추가하시려면 아래

76번부터 86번까지 복사한후 적당한곳에 붙여넣기 하시고 원하시는 경로로 변경후 추가해주세요 -->

          <li class="player__song">
          <img class="player__img img" src="img/playlist_02.jpg" alt="고원기 - 괜찮아"> // 이미지경로
          <p class="player__context">
          <b class="player__song-name">괜찮아</b>
          <span class="flex">
          <span class="player__title">고원기</span>
          <span class="player__song-time"></span>
          </span>
          </p>
          <audio class="audio" src="song/playlist_02.mp3"></audio>  // 음원경로 (링크주소가능)
          </li>

 

눈에 안압이 높아져서 고생을좀 했어요 ㅠㅠ

좀더 빨리 올려드리고 싶어 병원갖다오자마자 바로 작업했는데 많이 늦어져서 이제야 올립니다.

모두 유용하게 사용하시고 좋은하루되세요 ...^^

추천
12
  • 복사

댓글 12개

좋습니다...일단 제목과 가수 명이 길어도 왼쪽 스크롤 되니
다 보여 좋습니다.
혹시 처음부터 포스터 화면 보이게 할 수 없을까요.. 추천!
© SIRSOFT
현재 페이지 제일 처음으로