• 締切済み

mp3再生flexplayerの実行エラーについて

下記のFlexplayer というmp3再生スクリプトの実行を試みているのですが、 エラーが出てしまいます。 エラーはjquery.flexplayer.js内の 「($(this).getDocumentObj()).flexplayer_play is not a function」という内容で、 開発環境は eclipse IDE for JavaScript Web Developers. Version: Helios Service Release 1 Windows XP pro ver2002 service pack3 Firefox3.6.13 インターネットエクスプローラでも実行しましたが、NGでした。 丸っきり前に進めなくなってしまったため、取っ掛かり、アドバイス等、何卒ご教示よろしくお願いいたします。 スクリプト公開している元サイトはhttp://www.wktklabs.com/flexplayer/document.html#4-1です。 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title></title> <script src="js/jquery-1.3.2.js" type="text/javascript"></script> <script src="js/jquery.flexplayer.js" type="text/javascript"></script> <script type="text/javascript"> // <![CDATA[ var player; $(document).ready(function() { player = new $("#mediaPlayer").flexplayer({ swfPath : "js/flexplayer.swf" }); }); function playStart(){ player.play({ type: "mp3", //path値から自動的にmp3と判断されるので実際には必要無い path: "music/sample.mp3", volume: 100 }); /* 以下のようにしてもOK $("#mediaPlayer").play({ type: "mp3", //同上 path: "music/sample.mp3", volume: 100 }); */ } // ]]> </script> </head> <body> <div id="mediaPlayer"></div> <button onclick="playStart()">再生</button> </body> </html>

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

player = new $("#mediaPlayer").flexplayer({ swfPath : "js/flexplayer.swf" }); に指定している  swfPath : "js/flexplayer.swf" ありますか? 「flexplayer.swf」をjsディレクトリーに置いとかにゃだめですよ。

calpis350ml
質問者

補足

お返事ありがとうございます。仰るように、jsディレクトリーにjquery-1.3.2.js、jquery.flexplayer.js、flexplayer.swfの3点を置いたり、色々試してみましたが、それでもエラーが解決できません。 var player = new $("#mediaPlayer")~のところがどうやらエラーの原因になっているようですが、他に何か考えられる原因はありますでしょうか。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 外部ファイルJS参照を全て消さないと「文字が正しくありません」エラー

    実に不思議なのですが、 以下のように4つのJSファイルをインクルードしているHTMLファイルを ローカルで開くと「文字が正しくありません」とスクリプトエラーが何回かでます。 ですが、script1~4.js の行を全てコメントアウトすると、エラーはでません。 1~4のどれかにエラーが含まれているのかと、一つ一つを外してみましたが、 どの行を外しても、やはり「文字が正しくありません」と出てしまいます。 ローカルの然るべきパスに1~4はあります。また、HTML同様、JSもEUCになってます。 何が原因なのでしょうか? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>タイトル</title> <meta http-equiv="content-type" content="text/html; charset=euc-jp"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <link href="../css/style.css" rel="stylesheet"> <script src="../js/script1.js" type="text/javascript"></script> <script src="../js/script2.js" type="text/javascript"></script> <script src="../js/script3.js" type="text/javascript"></script> <script src="../js/script4.js" type="text/javascript"></script> </head>

  • prototype+jquery+プラグイン

    prototype.jsとjqueryとプラグイン系の読み込み方が良くわかりません。 クロスブラウザ対応のMP3プレイヤーを導入したく追加したのですが 順番を並べ変えたりいろいろしましたが導入する事ができずにこまっています。 何かいい方法はないでしょうか? エラーの内容も順序によって様々です・・・・ <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="lightbox.js"></script> <script type="text/javascript" src="lightbox_shortcut_keys_addon.js"></script> <script type="text/javascript" src="slide3/script/jquery-1.2.2.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.jcarousel.pack.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; </script> 以下追加===================================================== <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.compat-1.3.js"></script> <script type="text/javascript" src="jquery.jplayer.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; $j(document).ready(function(){ $("#mp3").jPlayer(); }); </script>

  • jqueryの組み込みが出来ません…

    jqueryのダウンロードサイトから最新番(current?)のjquery-1.8.2.min.jsをダウンロードして、head間に組み込みして、buttonをクリックしたら非表示範囲が表示されるという動作を練習しているのですが、機能してくれないです(涙 何がいけないのかさっぱりわかりません…。 jsファイルを外部かしてみたり、bodyとhtmlタグの間に記述してみたりしたのですが、それでも動作してくれません…。 何がいけないんでしょうか?? 下記にソースを書いておきますので、わかる方いらっしゃったらご教授おねがいします<m(_ _)m> <!DOCTYPE HTML PUBLIC > <html> <head> <title>notitle</title> <meta charset="shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="cntent-script-type" content="text/javascript"> <meta name="keywords" content=""> <meta name="description" content=""> <script type="text/javascript" src="./jquery-1.8.2.min.js"></script> <script type="text/javascript"> $("button").click(function(){ $("p").show(slow); )}; </script> <style type="text/css"> <!-- *{ margin:0px; padding0px; outline:none; } p { width:200px; height:200px; background:red; display:none; } --> </style> <!--[if it IE9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <button>Show it</button> <p></p> </body> </html> あのなめらかな感じで動作させてみたいんです。

  • 実行の順番を教えて下さい。

    ---------------------------------------------------------------------------------------------------------------- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> ( tmp_jquery=jQuery ・・・(1) )( function(){ $=jQuery=tmp_jquery; ・・・(2) } ); </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <script> $(function(){ alert(jQuery.fn.jquery); ・・・(3) }); </script> ---------------------------------------------------------------------------------------------------------------- 上記の処理では、jQuery1.7.1をロードして後、jQuery1.2.3をロードしていますが、 (1)のところで、jQuery1.7.1を保持し、 (2)で再び$とjQuery変数にロードしているため (3)のところで、"1.7.1"と表示されます。 さて、ここで(2)の部分がいつ実行されるのかが理解できません。 そもそも、今回の処理で記述されている ()() の意味がわかりません。 クロージャーなどで、 (function(){})() と記述しますが、 function(){}を式として認識させるために丸括弧で囲っているのは、 以下のサイトで知りました。 http://d.hatena.ne.jp/amachang/20080208/1202448348 今回も同様の意味なのでしょうか? だとすれば、(1)の前に(2)が実行されそうなのですが・・・。 どなたか、ご説明お願いできないでしょうか?

  • ジャバスクリプトが作動しません。

    初めまして、素人なので的外れな質問だったら恐縮です。 以下のようにジャバスクリプトを2つ記述しましたが、後ろに記述した1つしか作動しません。 記述の順番を入れ替えても、やはり後ろに記述した方しか作動しません。 何が悪いのか、どなたか教えて頂けますでしょうか? <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>ホームページテンプレート</title> <meta name="description" content="説明を入れます" /> <meta name="keywords" content="キーワード" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/script.js"></script> <link href="css/gallery11.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/effects.js"></script> <script type="text/javascript" src="js/glider.js"></script> <script type="text/javascript"><!-- Event.observe(window, "load", function(){ new Glider("album1", { duration:1.0 } ); }); // --></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#viewer'; var fadeSpeed = 1500; var switchDelay = 5000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script> </head>

  • jqueryを使った共通html埋め込みができない

    各ページに共通なヘッダ部分を、jqueryを使って読み込みたいと以下のコードを書いたのですが、なぜか読み込まれません。 test.htmlとheader.htmlは同階層(トップレベル)にあって、jsディレクトリにjquery-1.7.1.min.jsを置いています。 どうか知恵をお貸しください。 よろしくお願いします。 test.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> <!–- $(function(){ $("#header").load("header.html"); }); // -–> </script> <title>test</title> </head> <body> <div id="header"></div> main </body> </html> header.html <div id="header">header</div>

  • jqueryについて質問です。

    jqueryについて質問です。 過去こちらにお世話になりまして、一つの質問を解決していただきました。 しかしまた、わかったつもりになっていただけのようでして、再度問題が出てしまいました。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <link rel="stylesheet" type="text/css" href="main.css"></link> <script type="text/javascript" src="accordian.pack.js" charset="UTF-8"></script> <script type="text/javascript" src="jquery-1.3.2.min.js" charset="UTF-8"></script> <script type="text/javascript" src="smartsticky.js" charset="UTF-8"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function(){      new Accordian('basic-accordian',5,'header_highlight'); }); </script> このように記述しましたが、どちらも作動しないという状態になってしまいました。 smartsticky.jsが、元々は<SCRIPT>内に書かれていたものを、まとめて外部に出したような感じだとは思うのですが、それに対しての対処が思いつきません。見ての通りjQuery.noConflict();を使っても見たのですが、まるで効果なしです・・・ accordian.pack.jsとsmartsticky.jsをバッティングさせずに上手く同時に動かす手段はありますでしょうか? ちなみにこのページのscript自体はこの記事をのものです。 組み込みもこの記事を参考に行っています。 http://solidstate.jp/ContentsDisplay/floatingBox/script_147.html http://solidstate.jp/ContentsDisplay/accordion/script_130.html

  • jQuery 動的にボタンが増えた時

    <html> <head> <title>js sample</title> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> jQuery(document).ready( function() { $(".button_cls_1").click(function(){ alert('hello world! button 1'); }); $(".button_cls_2").click(function(){ alert('hello world! button 2'); }); }); </script> </head> <body> <input class="button_cls_1" type="button" value="テスト1" /> <input class="button_cls_2" type="button" value="テスト2" /> </body> </html> 上記のようなスクリプトでbutton_cls_1、button_cls_2が動的に増えた時に どのように書いたらいいかわかりません。 button_cls_1、button_cls_2、button_cls_3、button_cls_4の時もあれば button_cls_1、button_cls_2の時もあります。

  • crossSlideがうまく機能しないです;

    簡単な画像切り替えのプラグインとして、 crossSlideを見つけたので使用してみようとしたんですが、 全く何も表示されない状態で困っています。 下記のようにソースは記載しています。 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="ja" /> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <link href="css/base.css" rel="stylesheet" type="text/css"> <link href="css/index.css" rel="stylesheet" type="text/css"> <script type='text/javascript' src='js/jquery-1.9.1.min.js'></script> <script type='text/javascript' src='js/jquery.cross-slide.js'></script> <script type="text/javascript"> $(function(){ $('#mainvisual').crossSlide({ sleep: 1, fade: 1 },[ { src: 'images/01.jpg' }, { src: 'images/02.jpg' }, { src: 'images/03.jpg' } ]); }); </script> </head> <body> <p>タイトル</p> <div id="mainvisual"> <p>写真</p> </div> </body> </html> cssは何も指定していません。 jsフォルダに、jquery-1.9.1.min.jsファイル、jquery.cross-slide.jsファイルを入れています。 imagesフォルダには、01.jpg、02.jpg、03.jpgを入れてます。 ブラウザには <p>タイトル</p> は表示されるのですが、 div#mainvisualの中の <p>写真</p>の文字は表示されません。 何が原因なのでしょうか。 よければアドバイスの方よろしくお願いします。

  • jQueryでajax

    ajax(jQuery使用)を使った以下のサンプルは、 セレクトボックスを選択すると、ボタンを表示するのですが、 そのボタンをクリックしても、アラート(This is success!)が表示されません。 ajaxで吐き出した<button>ボタン</button>のボタンのクリックイベントが 検知しないような感じですが、いったいどこが間違っているのかわかりません。 どなたか、ご教授いただけると助かります。 htmlソース ------------------------------------------- <meta http-equiv="content-script-Type" content="text/javascript" /> <meta http-equiv="content-style-Type" content="text/css" /> <link rel="stylesheet" href="./photo.css" media="all" /> <title> テスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { alert("Test is success!"); }); $(".first").change(function() { var param = ''; $.ajax ({ type: "POST", url: "ajax.php", data: param, cache: false, success: function(res) { $("#result").html(res); } }); }); }); </script> </head> <body> <select name="first" class="first" id="first"> <option value="1">項目1</option> <option value="2">項目2</option> </select> <p>結果:</p> <div id="result" style="width:808px;"></div> </body> </html> phpソース ---------------------------------------- <?php echo '<button>ボタン</button>'; ?>

    • ベストアンサー
    • AJAX