新規投稿
フォローする

AmplitudeJSを使って音楽プレーヤーアプリを作成

動画再生アプリに続いて、音楽再生アプリを作ってみました。 AmplitudeJSを使ったら、とても簡単に作れました。

デモ

下図のような見た目で表示します。

フォーム設定

コード

カスタマイズビュー(一覧名: kintify)

<div id="kintify">
  <img data-amplitude-song-info="cover_art_url"/>
  <div class="bottom-container">
    <progress class="amplitude-song-played-progress"></progress>
    <div class="time-container">
      <span class="current-time">
        <span class="amplitude-current-minutes"></span>:<span class="amplitude-current-seconds"></span>
      </span>
      <span class="duration">
        <span class="amplitude-duration-minutes"></span>:<span class="amplitude-duration-seconds"></span>
      </span>
    </div>
    <div class="control-container">
      <span class="amplitude-prev"></span>
      <span class="amplitude-play-pause"></span>
      <span class="amplitude-next"></span>
    </div>
    <div class="meta-container">
      <span data-amplitude-song-info="name" class="song-name"></span>
    </div>
  </div>
</div>

JavaScript

下記ファイルを順に読み込みます.

・sample.js

(function() {
  "use strict";
  kintone.events.on([
    'app.record.index.show',
    'mobile.app.record.index.show',
  ], function(event){
    if(event.viewName !== 'kintify') return event;
    var titleField = 'タイトル';
    var soundFileField = '音声';
    var imageFileField = '画像';
    var client = new KintoneRestAPIClient();
    Promise.all(event.records.map(function(record){
      return Promise.all([
        client.file.downloadFile({
          fileKey: record[soundFileField].value[0].fileKey,
        }),
        client.file.downloadFile({
          fileKey: record[imageFileField].value[0].fileKey,
        })
      ]).then(function(files){
        return {
          name: record[titleField].value,
          url: URL.createObjectURL(
            new Blob([files[0]])
          ),
          cover_art_url: URL.createObjectURL(
            new Blob([files[1]])
          )
        }
      });
    })).then(function(songs){
      if(!songs.length) {
        document.getElementById('kintify').innerHTML = 'ファイルがありません。';
        return;
      }
      Amplitude.init({songs});
      document.querySelector('.amplitude-song-played-progress').addEventListener('click', function(e){
        Amplitude.setSongPlayedPercentage((parseFloat(e.pageX-this.getBoundingClientRect().left)/parseFloat(this.offsetWidth))*100);
      });
    });
    return event;
  });
})();

CSS

下記ファイルを読み込みます.

・sample.css

#kintify {
  width: 98%;
  max-width: 500px;
  margin: 10px auto;
}
#kintify img {
  max-width: 100%;
}
.amplitude-song-played-progress {
  width: 100%;
}
.time-container,
.control-container {
  display: flex;
  justify-content: space-between;
}
.amplitude-song-played-progress,
.amplitude-play-pause,
.amplitude-next,
.amplitude-prev {
  cursor: pointer;
}
.amplitude-play-pause.amplitude-paused::after {
  content: '再生';
}
.amplitude-play-pause.amplitude-playing::after {
  content: '停止';
}
.amplitude-next::after {
  content: '次へ';
}
.amplitude-prev::after {
  content: '前へ';
}
.song-name {
  font-size: 150%;
}

頑張れば、AmplitudeJS公式Examplesみたいにリッチなプレイリストも作れるみたいです。

0

0件のコメント

サインインしてコメントを残してください。