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

kintone カスタマイズ
1

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

デモ

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

フォーム設定

コード

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

\<divid="kintify"\>\<imgdata-amplitude-song-info="cover\_art\_url"/>\<divclass="bottom-container"\>\<progressclass="amplitude-song-played-progress"\>\</progress\>\<divclass="time-container"\>\<spanclass="current-time"\>\<spanclass="amplitude-current-minutes"\>\</span\>:\<spanclass="amplitude-current-seconds"\>\</span\>\</span\>\<spanclass="duration"\>\<spanclass="amplitude-duration-minutes"\>\</span\>:\<spanclass="amplitude-duration-seconds"\>\</span\>\</span\>\</div\>\<divclass="control-container"\>\<spanclass="amplitude-prev"\>\</span\>\<spanclass="amplitude-play-pause"\>\</span\>\<spanclass="amplitude-next"\>\</span\>\</div\>\<divclass="meta-container"\>\<spandata-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')returnevent;vartitleField='タイトル';varsoundFileField='音声';varimageFileField='画像';varclient=newKintoneRestAPIClient();Promise.all(event.records.map(function(record){returnPromise.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(newBlob([files[0]])),cover\_art\_url:URL.createObjectURL(newBlob([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);});});returnevent;});})();

CSS

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

・sample.css

#kintify{width:98%;max-width:500px;margin:10pxauto;
}#kintifyimg{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みたいにリッチなプレイリストも作れるみたいです。