[해피CGI][cgimall] HTML5를 이용한 APlayer

HTML5를 이용한 Music player (html5 를 이용한 음악 플레이어)

 

Aplayer 는 MIT 라이센스를 지향 합니다.

Aplayer 는 Html + JavaScript 로 구성 되어 있습니다. 
 

<div id="aplayer1" class="aplayer"></div>
<script src="dist/APlayer.min.js"></script>

   

var ap = new APlayer({
    element: document.getElementById('aplayer1'),
    music: {
        title: 'Preparation',
        author: 'Hans Zimmer/Richard Harvey',
        url: 'Preparation.mp3',
    }
});

    

API를 제공하기 때문에 관련 기능 체크 및 사용법을 찾기가 편리하네요. 

APlayer 에서 제공하는 기능 중 많이들 쓰시는 기능은 거의 다 있네요.
ap.play() // Resume play
ap.play(time) // Set currentTime
ap.pause() // Pause
ap.toggle() // Toggle between play and pause
ap.volume(percentage) // Set volume
ap.on(event, handler) // Event binding
ap.setMusic(index) // Switch music
ap.destroy() // Destroy this player
ap.addMusic(newMusics) // Add music dynamically, newMusics should be an array
ap.lrc // Lrc time and text
ap.playIndex // Current playing index
ap.audio // Return native audio, most native api are supported
ap.audio.currentTime // Returns the current playback position
ap.audio.loop // Returns whether the audio should start over again when finished
ap.audio.paused // Returns whether the audio paused
Most native api
  
아참 자막기능 Lrc 기능도 있긴 합니다만 ... 한땀 한땀 터치가 필요할듯 합니다. ^^;

<div id="player1" class="aplayer">
    <pre class="aplayer-lrc-content">
       [00:00.00]平凡之路 - 朴树
        [00:04.01]作词：韩寒 朴树
        [00:08.02]作曲：朴树 编曲：朴树
        [00:12.02]徘徊着的 在路上的
        [00:17.37]你要走吗
        [00:23.20]易碎的 骄傲着
        <!-- ... -->
    </pre>
</div>

아래의 이미지는 플레이어 스크린샷 입니다. ^^