ダウンロード

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.js"></script><!-- jQuery fileを読み込んでください。CDNなどからご利用するのをおすすめします。 -->
<script src="./path/to/jquery.button-audio-player.js"></script>

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

コードの記述

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

<script>
(function($) {
  $('{ID or Class Name}').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'
});

オプション

| 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 |