플래시없이 웹 페이지에 고품질 오디오 파일 포함하기

Question

나는 (음악을 그녀의 직업으로 작곡 한) 클라이언트를 위해 웹 사이트에 오디오 파일을 삽입하려고합니다.

그녀는 품질에 대해 매우 구체적이기 때문에 320kbps (약 50Mb)의 20 분짜리 mp3 트랙을 나에게주었습니다. 이 트랙은 웹 사이트에 도착했을 때 웹 사이트의 홈 페이지에서 자동 재생되지만 필요에 따라 일시 중지 할 수있는 기능이 있습니다.

자동 재생이 아닌 다른 플레이어가있을 것입니다. 따라서 동일한 모양으로이 모든 것을 수행하는 방법을 알아야합니다. 이해할 수 있고 설치하기 쉽습니다 (나는 아닙니다. JS와 잘 어울린다.) 또한 모든 장치에서 작동해야하며 플래시는 필요 없습니다.

먼저 HTML5 (사용하기 쉽고 깜박임 없음)로 퍼가기를 시도했지만 HTML5 플레이어가 바로 재생 (또는 '스트림')을 시작하지 않으면 이전에 50Mb 파일이 완전히로드 될 때까지 기다릴 것입니다. 너무 오랜 시간이 걸렸다.

SoundManager2에서 "BAR-UI/Compact UI single item"플레이어를 설치하려고했는데 디자인이 정말 좋았으며 이상적 이었지만 제대로 작동하지 않거나 완전한 튜토리얼을 찾지 못했습니다. 2 시간 동안 시도한 후에도 컨트롤이있는 플레이어를 설치하는 경우 - 파일이 재생되지 않지만 플레이어가 나타나거나 (노래 이름이 표시되지 않아도) 노래가 브라우저에서 즉시 재생되지만 컨트롤이 표시되지 않음 . SoundManager2의 문제를 해결하는 것은 어렵습니다. 코드에서 CSS에 4000 줄만있는 것을 고려하면 SoundManager의 Bar-UI와 매우 혼란스러운 파일을 설치하는 데 대한 설명이 거의 없습니다. WikiAudio에는 SoundManager에 대한 훌륭한 페이지가 있지만 컨트롤을 설치하고 표시하지 않습니다.

다른 옵션들 (jPlayer)은 내가하고 싶은 일에 대해 극도로 복잡했습니다 (웹 사이트에서로드되는 단순한 mp3 파일입니다!) 또는 플래시 기반이었습니다.

Answer 1

Amazing Audio Player가 귀하의 요구 사항을 충족합니까? http://amazingaudioplayer.com/ 그들은 js에 몇 가지 간단한 사용자 정의를 제공하고 필요에 맞게 CSS를 미세 조정할 수 있습니다.

저는 12 분 길이의 320kbs 파일을 성공적으로 사용했습니다.

Answer 2

웹 페이지에서 BAR-UI를 작동 시키려면 HTML 단편을 삽입해야합니다.

• 자바 스크립트 파일을 감지 : 그런 다음 플레이어의 자원을로드 할 수

  <div class="sm2-bar-ui compact"> 
      <div class="bd sm2-main-controls"> 
       <div class="sm2-inline-texture"></div> 
       <div class="sm2-inline-gradient"></div> 
       <div class="sm2-inline-element sm2-button-element"> 
        <div class="sm2-button-bd"> 
         <a href="#play" class="sm2-inline-button play-pause">Play/pause</a> 
        </div> 
       </div> 
       <div class="sm2-inline-element sm2-inline-status"> 
        <div class="sm2-playlist"> 
         <div class="sm2-playlist-target"> 
         </div> 
        </div> 
        <div class="sm2-progress"> 
         <div class="sm2-row"> 
          <div class="sm2-inline-time">0:00</div> 
          <div class="sm2-progress-bd"> 
           <div class="sm2-progress-track"> 
            <div class="sm2-progress-bar"></div> 
            <div class="sm2-progress-ball"><div class="icon-overlay"></div></div> 
           </div> 
          </div> 
          <div class="sm2-inline-duration">0:00</div> 
         </div> 
        </div> 
       </div> 
       <div class="sm2-inline-element sm2-button-element sm2-volume"> 
        <div class="sm2-button-bd"> 
         <span class="sm2-inline-button sm2-volume-control volume-shade"></span> 
         <a href="#volume" class="sm2-inline-button sm2-volume-control">volume</a> 
        </div> 
       </div> 
      </div> 
      <div class="bd sm2-playlist-drawer sm2-element"> 
       <div class="sm2-inline-texture"> 
        <div class="sm2-box-shadow"></div> 
       </div> 
       <div class="sm2-playlist-wrapper"> 
        <ul class="sm2-playlist-bd"> 
         <li><a href="http://freshly-ground.com/data/audio/sm2/SonReal%20-%20I%20Tried.mp3"><b>SonReal</b> - I Tried</a></li> 
        </ul> 
       </div> 
      </div> 
  </div> 
  

  : 그것은 (전체 폭 plauer 예를 들어 전체 폭에 대한) 다른 클래스 이름으로 정의 할 수 있습니다 이전 HTML 조각은 및 플레이어로 변환 : 바 ui.js

• CSS 파일 플레이어의 스타일을 :

이러한 모든 파일은의 "데모"폴더에있는 바 ui.css을 다운로드 할 수있는 SoundManager 2 : download