JavaScriptで音楽のループを実装する方法

前へ 次へ
このQ&Aのポイント
  • JavaScriptを使用して音楽のループを実装する方法について説明します。
  • 現在の実装では、音楽のループの最後と最初にワンテンポ間が入ってしまう問題が発生しています。
  • 原因が特定できず困っていますが、他のブラウザやプログラムの設定を変更しても現象は変わらないようです。どなたか解決策をご存知の方がいらっしゃいましたら、教えていただけると助かります。
回答を見る
  • ベストアンサー

音楽のループについて（JavaScript）

JavaScriptで音楽をループさせています。 ループの最後と最初に間が入ってしまい、原因がわからず困っています。 どなたか教えて頂けませんでしょうか。 使っているJavaScriptは「audio.js」というスクリプトです。（下記※１参考サイト） 設置自体は、素人の私でも簡単でしたので参考サイトを参照しそのまま設置しました。 全てのブラウザで音楽が流れましたので、そこまでは良かったのですが 流れ終わったあと音楽が止まってしまいますので、ループの設定をしなければと思い 下記のコード（※２）でループすることはできました。 しかし、ループした時の最後と最初にワンテンポ間が出来てしまいます。 私のPC（Windows７）で現象が起きているのはSafari（5.1.7）です。 WindowsXPだとChromeでも起きているようです。（バージョンは不明です） サイトが重たいのかなと思い、HTMLコード等工夫してサイトを軽くしたりしましたが変わりませんでした。 他に、ブラウザが音を読み込む過程を考えて、メディアプレイヤーなのか、QuickTimeなのか 「規定のプログラムの設定」で決められたプログラムに左右されていると思い、プログラムを変更しましたが現象は変わらないように思えました。 audio.jsが良くないのでしょうか。 原因が特定できずに困っています。 ループの最後と最初に間が入らないようにするにはどうすればいいのでしょうか。 どなたかご存知の方がいましたら、ご享受お願いします。 また、JavaScriptでループが綺麗に動くスクリプトをご存知の方がいらっしゃいましたら、教えていただけないでしょうか。 よろしくお願いします。 ※１参考サイト 主要ブラウザ全てにaudio要素でMP3を再生できるようにするスクリプト -audio.js http://coliss.com/articles/build-websites/operation/javascript/js-a... ※２ ＜コード＞ <audio src="http://URL/images/AAA.mp3" loop /> ※JavaScriptのコードについては、読み込みファイル名とCSS部分しか変更していません。

  • tsyok
  • お礼率90% (29/32)

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

http://kolber.github.com/audiojs/docs/ にあるとおり、audiojs が使っているのは Shockwave Flash ですよ。 ぱっとみ、 <audio> タグを解析して Flash で再生している用です。 AUDIO 要素に対応しているブラウザの方の問題か、 AUDIO 要素に対応していないブラウザに対する audio.js の対応の問題か MP3 ファイルの問題か を切り分けるのが先かと。 http://reference.ascii.jp/html/audio こちらのブラウザ別対応状況からすると、 AUDIO 要素に対応しているブラウザの Safari 5.1 と Google Chrome 14 で現象が起きていると推測できます。 MP3 ファイルの問題も疑われるので、異なるファイルでも現象が再現されるか、特定のファイルのみの現象なのかを調べてみてはどうでしょうか。

tsyok
質問者

お礼

OrangeCup150さん ご回答ありがとうございます。 教えていただいた通り、切り分けを行ってみました。 MP3以外のWAV等のファイルで試してみましたが、現象は変わりませんでした。 JavaScriptも別の音楽再生用のスクリプトにしましたが、現象が変わりませんでした。 ブラウザかPCの問題かと思われます。 なんとか解決したく、調べた結果loopタグ（このスクリプト「audio.js」ではHTMLにloopタグを使用しています）を使用せずに、settimeoutで無理やりループをすることが一番スムーズにつながるといった事が書いてありました。 「audio.js」をsettimeoutを使いループさせてみます。 まだ成功していませんので、別の質問として投稿してみます。 ご協力ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascriptの外部ファイル読み込みの不具合

    質問させて頂きます。 javascript初心者です。 現在サイト作成にあたり、jsを組み込んでおります。 ajaxmailを設置しようと、参考サイトの手順通りに行ったのですが、 <script type="text/javascript" src="./js/protoculous-effects-packer.js"></script> の記述をすると、他のjsが動作しなくなってしまいます。 現在読み込んでいるものをコピペさせて頂きます。 <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script src="./js/mapstyle.js"></script> <script src="./js/modernizr.custom.min.js"></script> <script src="./js/jquery-1.10.2.js"></script> <script src="./js/hoge.js"></script> <script src="./js/jquery.smooth-scroll.min.js"></script> <script src="./js/jquery-ui-1.10.3.custom.min.js"></script> <script type="text/javascript" src="./js/protoculous-effects-packer.js"></script> <script type="text/javascript" src="./js/lightview.js"></script> 下２行がajax設置の際に読み込むものです。 lightview.jsだけの場合は機能しています。 どなたかご教示の程、よろしくお願い致します。

  • FLASHバナーのjavascript化

    FLASHバナーを作ったのですが、ほかのブログサイト等で使ってほしいときに『設置する時は、下に表示されている設置用タグをブログに貼り付けてください。』と <script language="javascript" type="text/javascript" src="​http://www.untara.com/js/banner.js"></script><nosc...​ href="​http://www.untara.com/"​ target="_blank">『むにゃむにゃ』公式サイト</a></noscript> というようなスクリプトが貼ってありますが、このスクリプトはどのように作成すればよいのか、ご存知の方教えてください！ちなみにFlash CS3 Professionalを使っております。

    • ベストアンサー
    • Flash
  • VSCodeとJavaScript

    Visual Studio CodeとJavaScriptについて質問です。JavaScriptを練習するときブラウザーで実行していました。 JavaScript（JS）のコードは、Cloud9で書いています。 VSCode上でJSを実行して、動作確認する方法があるなら教えていただきたいです。

  • javascriptライブラリの使い方

    aa.js bb.js cc.js の3つのjavascriptを使ったサイトを作成中です。 ヘッダーに <script src="aa.js" type="text/javascript"></script> <script src="bb.js" type="text/javascript"></script> <script src="cc.js" type="text/javascript"></script> と記載し、「aa.js bb.js cc.js 使う前提のスクリプト」をサイト上に記載しているのですが、aa.js bb.js cc.js のそれぞれが重いため、サイト記載のスクリプトがaa.js、bb.js、cc.jsより先に読み込まれてしまい、思ったような表示が出来ません。 (cc.jsが読み込まれないままの状態でサイトのスクリプトを読み終わってしまう) そこで調べてみると、下記のようなライブラリを発見しました。 http://notnil-creative.com/blog/archives/1361 このライブラリ(script.js)を使うと、通常は以下のように書くJavascriptの読み込みが、 <script src="jquery.js"></script> <script src="my-jquery-plugin.js"></script> <script src="my-app-that-uses-plugin.js"></script> 下記のように書くことができるそうです。 $script('jquery.js', function () { $script('my-jquery-plugin.js', function () { $script('my-app-that-uses-plugin.js') }) }) この書き方で、ページのレンダリングを阻害せず、非同期にJavascriptを読み込むことができ、なおかつ「jQueryが読み込まれてからjQueryプラグインを読み込み、そのあとウェブサイト用のスクリプトを読み込む」というような依存関係のある複数のJavascriptファイルの読み込みにも対応できちゃいます。 という優れものであり、私の要求にぴったりと思いました。 早速、http://notnil-creative.com/blog/archives/1361のページからscript.jsをダウンロードしたのですが、使い方がわかりません。 例ではヘッダーに $script('jquery.js', function () { $script('my-jquery-plugin.js', function () { $script('my-app-that-uses-plugin.js') }) }) と記載すればOKと書いてあります。 ただ、この記入方法で動くようにするためには、$scriptがscript.jsに連動していることを記載すべき だと思いますが、javascriptでそのような例を見たことがなく困惑しています。 このスクリプトの使い方(ヘッダーの記入方法)について、ご教授頂けませんでしょうか? 宜しくお願い致します。

  • javascriptのクラスの処理について

    javascriptのクラスを利用した処理で分からない所がありますので 教えて下さい。 最初に 下記の「1.の方法」でhtml側にjavascriptを呼び出す記述を して動かしていましたが、「2.の方法」に変更しなければならなく なりました。 ところが、「2.の方法」でやりますと、メインのhtml側がフリーズ してしまいます。 調べてみますと、メモリーを食いつぶしていますので、何か永久ループの ような状態に陥っているようです。 こような場合、何かやり方がおかしいのでしょうか？ ご存知の方がいらっしゃいましたら、ご教授お願いいたします。 === 1.の方法 ===(問題なく動きます)================= ---ソース(index1.html) <script type="text/javascript" src="js1.js"></script> <script type="text/javascript"> hoge.create( abc, "def"); </script> ---ソース(js1.js) var hoge = { 　　xxx: ～～, 　　yyy: ～～ 　　create: function(val1,val2) { 　　　　～略～ }; === 2.の方法 ===(フリーズしてしまいます)=========== ---ソース(index2.html) <script type="text/javascript" src="js2.js"></script> <script type="text/javascript"> hoge_sub(); </script> ---ソース(js2.js) function hoge_sub(){ 　　hoge.create( abc, "def"); } var hoge = { 　　xxx: ～～, 　　yyy: ～～ 　　create: function(val1,val2) { 　　　　～略～ };

  • JavaScriptを使う時は、

    ・・・・・・・・・・・・・・ <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> <script> alert("test"); </script> </BODY> </HTML> ・・・・・・・・・・・・・・ これでメッセージボックスが表示されるのですが、 なぜ <script type ="text/javascript"> <!-- //--> </script> で括らなくていいのでしょうか？ JavaScriptを使う時は、 <script> </script> だけでもいいのでしょうか？ http://www.pori2.net/js/kihon/4.htmlこのサイトを参考にしました。

  • 複数のjavascriptが作動しない

    http://www.coolwebwindow.com/template/public.php 上記無料で配布されているホームページのテンプレートに 下記lightboxを設置しました。 http://lokeshdhakar.com/projects/lightbox2/ このテンプレートには、ページ内リンクへの移動がスムーズになる javascripが設置されているのですが、 このページにlightboxを追加すると スムーズに移動するjavascriptが無効になってしまいます。 <!--ページをスムーズに移動するjs--> <link rel="stylesheet" href="css/common.css" type="text/css" /> <script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <!--lightboxのjs--> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /><script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> どのように対処すればいいのでしょうか？ ご教授お願いいたします！

  • このJavaScriptを動かしたい！

    こんばんわ。 http://bodytag.org/bt_melter/ ↑ こちらのサイトのようなJavaScriptを動かしたいのですが、 どうやったら動くのでしょうか。 JSファイルをDLして、サーバにアップしました。 もちろんHTMLにも<script>～</script>を記述しました。 JSファイルをいじくったりしなければ作動しないのでしょうか？？

  • JavaScriptプラグインが読み込めません

    「easySlider1.7」というJavaScriptプラグインを使い、サイト内の画像をスライドさせようとしています。 MacのデスクトップにおいたフォルダのHTMLと同じ階層にeasyslider1.7というフォルダをおき、<head>内に <script type="text/javascript" src="easyslider1.7/js/easySlider1.7.js" ></script> <script type="text/javascript" src="easyslider1.7/js/jquery.js"></script> と記述し、 <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ auto:true }); }); </script> で動作させようとしているのですが、 ブラウザで試すと動かず、コンソールには ReferenceError: Can't find variable: jQuery TypeError: Result of expression '$("#slider").easySlider' [undefined] is not a function. と出てきます。 上段の”jQuery”はeasySlider1.7.js内に記述されているものです。 ちなみにgoogleAPIのjQueryをロードしても同じエラーが出ました。 何が原因なのでしょうか。ご回答宜しくお願いします。

  • javascriptコードについて

    下記(1)(2)コードを実行すると、(1)は正常に表示されましたが、(2)の書き方では表示されませんでした。 ----------------------------------------------------------------------------- (1) <script type="text/javascript"> <!-- document.write("Hello"); //--> </script> ----------------------------------------------------------------------------- (2) <script type="text/javascript"> <!--document.write("Hello");//--> </script> ----------------------------------------------------------------------------- そこで質問ですが、'<!--'と'//-->'は改行しないと、 プログラムが正常に動作しないなどのルールはありますでしょうか。 ネット検索もしておりますが、それらしい情報を確認できません。 もし本件について、ご存知の方がいらっしゃいましたらご教授お願いします。 当方、プログラム初心者です。 できるだけ情報を集めたいので、本件について参考になるURLなどがあれば、 併せて回答お願いします。 また、本コードを実行した環境は以下の通りです。 OS：Windows7 pro ブラウザ：IE9、11、chrome、FireFox ※javascript使用に必要な設定は全て有効。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する