1.0.3 • Published 4 years ago

jquery.button-audio-player v1.0.3

Weekly downloads
5
License
ISC
Repository
github
Last release
4 years ago

ダウンロード

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'
});

オプション

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

4 years ago

1.0.2

4 years ago

1.0.0

4 years ago