Aplayer Example

by MeteorV

HTML

<html>
  <body>
    <div class="player">
      正常大小 (搭配設定 div 寬度)
      <div id="player" class="aplayer" style="width: 70%"></div>
      小型
      <div id="player-mini" class="aplayer"></div>
    </div>
  </body>
</html>

<script src="
https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css
" rel="stylesheet">

<script>
  let apNormal = new APlayer({
    container: document.getElementById('player'),
    listFolded: false,
    fixed: false, //吸底模式
    mini: false, //迷你模式
    listMaxHeight: 900,
    volume: 0.9,
    loop: 'none',
    audio: [{
      name: 'You and Me',
      artist: 'しゃろう',
      url: 'https://meteorve.github.io/WebAssets/audio/YouAndMe.mp3',
      cover: 'https://meteorve.github.io/WebAssets/image/YouAndMe.jpg',
      theme: '#d9edf7'
    }]
  });
  apNormal.on('play', function() {
    ap.seek(50); // 播放時從 50 秒開始
  });

  let apMini = new APlayer({
    container: document.getElementById('player-mini'),
    listFolded: false,
    mini: true, //迷你模式
    listMaxHeight: 900,
    volume: 0.9,
    loop: 'none',
    audio: [{
      name: 'You and Me',
      artist: 'しゃろう',
      url: 'https://meteorve.github.io/WebAssets/audio/YouAndMe.mp3',
      cover: 'https://meteorve.github.io/WebAssets/image/YouAndMe.jpg',
      theme: '#d9edf7'
    }]
  });
</script>