jQuery Button Audio Player

ダウンロード

GitHub

NPM

$ npm install jquery.button-audio-player

利用方法

CSS

<link rel="stylesheet" href="./path/to/jquery.button-audio-player.css">

JavaScript

<script src="./path/to/jquery.button-audio-player.js"></script>

上記CSSとJSファイルを設置したら、以下のコードを記述します。

 

コードの記述

<div id="bapRender"></div>
<!--
	ID名は好きに記述してください。
	好きな場所にDIVタグなどで配置してください。
	配置したタグのID名などで呼び出すようにしてください。
-->

<script>
(function($) {
  $('#bapRender').buttonAudioPlayer({
    type: 'default',
    src: 'path/to/example.mp3'
  });
})(jQuery);
</script>

 

NPMでインストールした場合の利用方法

SCSS

@import '~jquery.button-audio-player/dist/jquery.button-audio-player.css';

JavaScript (webpackなど)

import $ from 'jquery';
window.jQuery = $;
import 'jquery.button-audio-player';

var bap = new buttonAudioPlayer({
  el: '#bapRender', // {ID or Class Name}
  type: 'default',
  src: 'path/to/mp3 file or file url'
});

見た目は、以下の2種類

OFF

default 　

bar-animation

 

オプション

Key	Default	Description
type	default	(String) 設定は以下の通り。 default、bar-animation
src		(String) MP3 ファイルまでのPATHまたは、URLを記述
loop	true	(Boolen) ループするかしないか。下にあるloopStart、loopEndが設定されている場合は、こちらの設定はスルーされる
loopStart	false	(Numeric) ループ時のスタート地点の秒数 1/sec
loopEnd	false	(Numeric) ループさせるための終端地点の秒数 1/sec

 

お借りしたもの

サンプルで利用しているmp3データは、以下の通りです。

Track: Robin Hustin x TobiMorrow - Light It Up (feat. Jex) [NCS Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/bdE_SyHad90
Free Download / Stream: http://ncs.io/LightitupYO