JQueryで音声の再生・停止の切り替えボタンをつける

らら
らら

はじめに

今回は、multiple-circular-playerの紹介です。

https://github.com/kuantal/Multiple-circular-player

jquerymp3

上記のようにイメージ画像の上に再生ボタン、再生経過、停止がつけれるものになります。

SVGなので再生ボタン等のサイズは調整できます。

設置

githubからダウンロードしてきて。

ヘッダーにplayer.jsとprogres-bar.cssを設置します。


<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="./js/progres-bar.css">
<script src="./js/player.js"></script>

JSは下記のように設置mediPlayerはCSSで使用しているので固定です。


<script>
$(document).ready(function () {
	$('.mediPlayer').mediaPlayer();
});
</script>

HTMLタグ

下記は複数設置することができるのでお好みの配置で・・


<div class="mediPlayer">
	<audio class="listen" preload="none" data-size="250" src="./sounds/piano.mp3"></audio>
	<img src="all.png">
</div>

デモ

デモplayer.jsで作ったサンプル

音声は、multiple-circular-playerのサンプルのものです。

関連記事