2016-05-03 21 views
1

この質問は愚かなように見えるかもしれませんが、問題の内容がわかりません。当初、私はページにオーディオを追加します。この機能でのみ.jsファイルを持っている:このコードは別のファイルでは動作しますが、インラインでは動作しません

function addAudio(id_name, audio_filepath) { 
    var audio = $('<audio />') 
       .prop('id', 'audio' + id_name) 
       .prop('src', audio_filepath) 
       .text("Your reader doesn't support audio."); 

    $('body').append(audio); 

    $('#' + id_name).click(function() { 
    audio.get(0).play(); 
    }); 
} 

そしてそれは、このようにHTMLで呼ばれています:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
</head> 
<body> 
    <!-- some content here --> 
    <button id="test">Play</button> 

    <!-- reference to lib containing jquery --> 
    <script type="text/javascript" src="js/lib.min.js"></script> 

    <!-- script where the function addAudio resides --> 
    <script type="text/javascript" src="js/add-audio.js"></script> 

    <script type="text/javascript"> 
    $().ready(function() { 
     addAudio('test', 'audio/01-test.wav'); 
    }); 
    </script> 
</body> 
</html> 

そして、それが正常に動作します。問題は、ファイルから関数を移動してスクリプトタグにインラインで入れようとするときです。その場合、ボタンをクリックすると、コンソールにUncaught TypeError: Cannot read property 'play' of undefinedが表示されます。

これは修正されたコードである:誤りを分離しようと

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
</head> 
<body> 
    <!-- some content here --> 
    <button id="test">Play</button> 

    <!-- reference to lib containing jquery --> 
    <script type="text/javascript" src="js/lib.min.js"></script> 

    <script type="text/javascript"> 
    function addAudio(id_name, audio_filepath) { 
     var audio = $('<audio />') 
        .prop('id', 'audio' + id_name) 
        .prop('src', audio_filepath) 
        .text("Your reader doesn't support audio."); 

     $('body').append(audio); 

     $('#' + id_name).click(function() { 
     audio.get(0).play(); 
     }); 
    } 

    $().ready(function() { 
     addAudio('test', 'audio/01-test.wav'); 
    }); 
    </script> 
</body> 
</html> 

、私は機能が.jsファイルである場合、変数audioはjQueryオブジェクト[audio#audiotest]であることが判明、しかし場合関数その変数はオブジェクトn.fn.init {}です。

どうしてですか?

EDIT

私はそれが(私はEPUB3形式の電子ブックを作ってるんだ)XHTMLファイルにありますので、それが起こることに気付きました。ファイルをhtmlに変更すると、再び動作します。しかし、オーディオタグはxhtmlでサポートされています(ここで仕様を確認することができます:http://www.idpf.org/accessibility/guidelines/content/xhtml/audio.php)ので、私が言ったように、機能が別のファイルにあれば動作します。なぜインラインではないのですか?

+0

にライン$('<audio />')を変更し、問題を解決しましたか? –

+1

コードが別のファイルにあるとき、オーディオは正常に再生されます。コードがインラインである場合、コンソールは 'Uncaught TypeError:未定義の 'play'プロパティを読み取れません。 ' –

+0

' 'にあります... – IMTheNachoMan

答えて

0

私は、人々が答えを見つけました。皆様のご関心とご協力をいただき、ありがとうございます。ご迷惑をおかけして申し訳ありません。私はこの質問を削除することを考えていましたが、私は同じことを通過する人を助けるためにそれに答えるつもりです。

は、Mozilla Foundationによると、XHTMLにインラインJavaScriptを使用して面倒である:(https://developer.mozilla.org/en-US/docs/Archive/Web/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents_/Examples#Example_1

JavaScript typically contains characters which can not exist in XHTML outside of CDATA Sections.

は、だから私はそれがあなたのブラウザコンソールで何を示してい$('&t;audio /gt;')

0

私の問題はあなたのファイル参照にあると思います。あなたのコードをjsfiddleに入れると、インターネット上のwavファイルを参照しているように見えます。

https://jsfiddle.net/ur64L8uh/

function addAudio(id_name, audio_filepath) { 
     var audio = $('<audio />') 
        .prop('id', 'audio' + id_name) 
        .prop('src', audio_filepath) 
        .text("Your reader doesn't support audio."); 

     $('body').append(audio); 

     $('#' + id_name).click(function() { 
     audio.get(0).play(); 
     }); 
    } 

    $().ready(function() { 
     addAudio('test', 'http://download.wavetlan.com/SVV/Media/HTTP/WAV/Media-Convert/Media-Convert_test1_Alaw_Mono_VBR_8SS_16000Hz.wav'); 
    }); 
} 
+0

あなたが提供したURLに変更しようとしましたが、まだ成功していません。 –

+0

私は質問を編集しました、私はそれがより明確であることを望みます。 –

関連する問題