JDBな人生  専門的なことから日常的なことまで~ まぁ自由きままに書いていきます。
2017年04月 / 03月<< 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>05月

アクセスランキング

[ジャンルランキング]
コンピュータ
338位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
42位
アクセスランキングを見る>>

主要なブラウザで音声ファイルを再生するためのJavaScriptライブラリ

JDBの作っているWEBアプリ的なもので効果音を流す機能をつけようと思ったんですが、何の確認画面も表示されず、アドオンやプラグインの追加をする必要もなく、かつ主要なブラウザ(IE,Firefox,Google Chrome)で共通して使える関数は無かったので、作ってみました。

Sound.js
http://blog-imgs-34.fc2.com/j/a/b/jabnz/Sound.js

Sound.playSound("ファイル名")
Sound.Audio("ファイル名")
メソッド
再生/再生再開:play()
停止:stop()
一時停止:pause()

プロパティ
ファイルのURL:src
ループ回数:loop
再生位置:currentTime


音声ファイル「sound.wav」を再生する
Sound.playSound("sound.wav");

最初に作った時はこれだけだったんですが、よく考えたら再生中のものを停止する機能もあった方がいいと思い、そっちも作ってみました。

音声ファイル「sound.wav」を再生する/停止する
var s = new Sound.Audio("sound.wav");

//再生
s.play();

//停止
s.stop();

「Sound」の中に「Audio」ってのも何か変かもしれませんが・・・。

ブラウザが「Audio」クラスに対応している場合は、pause関数も使えます。
//一時停止
s.pause();

//再生開始位置を指定
s.currentTime = 10;
(対応していない場合は停止されます)

現段階ではあまり情報が無いので実装するかどうか迷ったんですが、ループ回数を指定する機能も付けておきました。
//ループ回数の指定
s.loop = 5;

新しく実装される「Audio」クラスも、まだまだ不完全なもののようです。
(Chromeは停止後に再生を再開すると前に再生していた音が一瞬流れます。
また、ループ回数を指定すると何を指定しようが無限ループになるようです。
Firefoxはループ回数を指定してもループしませんでした。
Safariはそもそも再生できませんでした。)

これを作ってて改めて実感しました。オブジェクト指向って素晴らしいですね。
 


 
   JavaScript    TB(0)    CM(3)    EDIT    ページ↑

コメント投稿


 管理者だけに表示

コメント

[ 一天打魚,天天上網 ]
こんばんは。
サンプルコードを参考に下記のHTMLを作ってみたところ、google Chromeでは問題なく動くのですが、IE8では、一時停止ができず、停止と同じ動作となります。
コードを追ってみたところ、
Sound.Audio.prototype.pause でも
Sound.Audio.prototype.stop でも
if (this.cannotUse){
ブロックを通っています。
当然これではcurrentTimeプロパティにもアクセスできません。

・・・何か簡単なことを見落としているような気もしますが、原因、対象法等もしご存知でしたら、ご教示頂けると幸いです。
(不躾けな書き込みで申し訳ありません)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="sound.js"></script>
<script>
var s = new Sound.Audio("01.mp3");

</script>
</head>
<body>
<audio id="sound"><source src="01.mp3"></audio>
<p><a href="javascript:s.play();">音声を再生</a></p>
<p><a href="javascript:s.pause();">一時停止</a></p>
<p><a href="javascript:s.stop();">停止</a></p>
</body>
</html>
2013年02月06日(水) 01:44
[ JDB Luigi ]
> こんばんは。
> サンプルコードを参考に下記のHTMLを作ってみたところ、google Chromeでは問題なく動くのですが、IE8では、一時停止ができず、停止と同じ動作となります。
> コードを追ってみたところ、
> Sound.Audio.prototype.pause でも
> Sound.Audio.prototype.stop でも
> if (this.cannotUse){
> ブロックを通っています。
> 当然これではcurrentTimeプロパティにもアクセスできません。
>
> ・・・何か簡単なことを見落としているような気もしますが、原因、対象法等もしご存知でしたら、ご教示頂けると幸いです。
> (不躾けな書き込みで申し訳ありません)
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
> <script src="sound.js"></script>
> <script>
> var s = new Sound.Audio("01.mp3");
>
> </script>
> </head>
> <body>
> <audio id="sound"><source src="01.mp3"></audio>
> <p><a href="javascript:s.play();">音声を再生</a></p>
> <p><a href="javascript:s.pause();">一時停止</a></p>
> <p><a href="javascript:s.stop();">停止</a></p>
> </body>
> </html>

当ブログの記事を読んでいただきありがとうございます。
ご質問の件ですが、本文中の『(対応していない場合は停止されます)』とある通り、Audioクラスに対応していないブラウザでは一時停止の処理を行うことができません。
2013年02月06日(水) 06:31
[ 一天打魚,天天上網 ]
> Audioクラスに対応していないブラウザでは一時停止の処理を行うことができません。

コメントありがとうございます。
ブラウザの仕様なのですね。
私のコードの書き方は問題ないようなので、安心しました。
2013年02月06日(水) 07:02

トラックバック

この記事へのトラックバック:

プロフィール

JDB Luigi

Author:JDB Luigi
どこにでもいるようなありふれた人間・・・という訳でもなく、かと言って怪しい宗教を信仰する変人という訳でも無い。

基本的に掲載しているコード等は煮ていただいても焼いていただいても結構ですが、利用は自己責任にてお願いいします。
また、バグ・アドバイス等もしあればよろしくお願いします。