내장형 음악 플레이어

3975 단어 htmljavascriptcssmusic
Spotify의 임베드 플레이어에서 영감을 받은 MediaElement.js을 사용하여 웹 사이트의 로컬 오디오에서 간단한 HTML 음악 플레이어를 임베드합니다.

(전체 화면 라이브 Demo )



권장 요구 사항


  • MP3 오디오 소스.
  • 정사각형 이미지.

    • 구성


  • 내 저장소를 복제하거나 다운로드합니다( Yizack/embeddable-music-player ).

  • 파일 편집 /player/song.html
  • 페이지 제목에 노래 이름을 {SONG-NAME}에 붙여넣습니다.
  • 재생 버튼을 누를 때 재생될 오디오의 오디오 파일 URL을 {MP3-SOURCE}에 붙여넣습니다.
  • 표시할 이미지의 이미지 URL을 {ARTWORK}에 붙여넣습니다.
  • 예를 들어 내가 가지고 있는 라이브 데모 /player/just-stay.html 와 같이 다른 플레이어를 포함하도록 새 html 파일의 이름을 바꾸거나 만들 수도 있습니다.



  • 파일 편집 /css/music-player.css
  • .player-color의 css 파일 끝에서 플레이어의 배경색을 편집하거나 새 클래스를 추가할 수 있습니다. 예를 들어 라이브 데모에서는 새 클래스를 추가했습니다.


    •   .just-stay {
      background: rgb(240 170 194);
  }



  • 새 클래스를 추가하는 경우 이 줄/player/song.html에서 <div id="player" class="player-color"> 의 클래스 속성을 변경해야 합니다. 예를 들어 라이브 데모의 경우 <div id="player" class="just-stay">로 변경했습니다.
  • 아래 코드를 사용하여 {YOUR-HTML-PLAYER}를 폴더 /player 내의 HTML 파일 이름으로 바꾸고 오디오 플레이어를 표시할 사이트에 붙여넣습니다.


    •   <iframe src="/player/{YOUR-HTML-PLAYER}.html" width="300" height="385"></iframe>


    (iframe을 사용하는 웹사이트에서의 사용 예: Dimatis Website )

  • 응답성 덕분에 원하는 너비와 높이로 플레이할 수 있습니다.

    •   <iframe src="/player/{YOUR-HTML-PLAYER}.html" width="100%" height="450"></iframe>


    (iframe을 사용하는 웹사이트에서 사용하는 또 다른 예: Dimatis - Fly Again )
    사용 가이드:원스톱 AI 개발 및 생산 플랫폼 AlphaIDE로 지능형 데이터 플랫폼을 빠르게 배포
    반응 개념 2 배우기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage