javascriptのHTML5設定のオーディオソースが機能しない

HTML5ブラウザのフォーマットのせいで、私はフォールバックのオーディオフォーマットをオーディオフォーマットに入れなければなりません。ソースのsrcをプログラムでオーディオに設定したいのですが、動作していません。

これは私のHTMLコードです:


それからjqueryを使ったjavascriptで、私はそれぞれのソースを設定しました(私は1つのオーディオタグと多くのmp3を持っていて、オーディオタグのソースを変更したいイベントに基づいています)。私はフォールバックのサポートが必要であり、ダイナミズムも必要だからです。

jqueryを使用して、私はsrcを操作します:

$('#oggSource').attr('src', 'OggFormat.ogg');
$('#mp3Source').attr('src','Mp3Format.mp3');

しかし、これはうまくいきません。どんな考え?

私が使用する場合:


それは動作しますが、必要に応じてコードで設定し、静的に提供する必要はありません。

11

3 答え

.detach()。appendTo(parent)を使用しているようです: http:// jsfiddle .net/pimvdb/b7Jgh/

$("#oggSource").attr("src", "foo.ogg").detach().appendTo("#audioPlayer");

I guess the browser only starts loading (and playing with autoplay) if a element is added, not when it is just modified. I'm not sure why though, but appending it after detaching works.


Edit: You can also directly do .appendTo since an element is unique (i.e. it has to be detached anyway): http://jsfiddle.net/pimvdb/b7Jgh/6/.

function updateSource(source, src) {
    source = $(source);
    source.attr("src", src).appendTo(source.parent());
}
14
追加された
すばらしいです!!私は何か間違ったことをしたこの考えの背後に1時間を無駄にした:)
追加された 著者 TCM,
アンドロイドでは動かない
追加された 著者 Moshe L,
アンドロイドブラウザでは動作しませんが、アンドロイド用Chromeで動作します
追加された 著者 dave,

source要素にsrc属性を設定した後、audio要素に対してload()を呼び出してからplay()を呼び出します。 (または、autoplay属性が設定されている場合はload()を実行してください)。

2
追加された
Chromeでは少なくとも1つは動作しません。 load()を呼び出すと、何もしなかったし、play()$( '#audioPlayer')を呼び出す。play()は、playというメソッドが存在しないという例外を投げた。
追加された 著者 TCM,
うーん...右。jqueryで呼び出すと、この場合は機能しません。
追加された 著者 TCM,
@Anthony、Jqueryオブジェクトではなく、要素自体でこれらを呼び出さなければなりません。たぶん<< a href = "http://stackoverflow.com/questions/47837/getting-the-base-element-from-a-jquery-object>" title = "jqueryオブジェクトから基本要素を取得する%26gt"> stackoverflow.com/questions/47837/… ;何が必要ですか?私はJqueryを使用しないので知らない。
追加された 著者 Shadow2531,

あなたは document.getElementById( "oggSource")を試しましたか?src = 'OggFormat.ogg' など?

0
追加された
動作しません。 pimvdbはこの問題を解決しました。
追加された 著者 TCM,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript