モバイルとデスクトップの両方のブラウザーで使用できる RIA を作成しようとしています。このアプリの主な目的の 1 つは、サウンドを再生することです。X個ある可能性があります（現在、150個以上あります）
特定のユーザー アクションで、新しいオーディオ オブジェクトを作成し、特定のクリップをロードして再生したいと考えています。理想的には、新しい「オーディオ」オブジェクトを作成し、src をロードの待機に設定してから再生します。これはさまざまなデスクトップ ブラウザで機能しますが、Android 4.2、Chrome、およびストック ブラウザでは失敗するようです。
オーディオを含める 4 つの異なる方法を試しました。
- オーディオ ブロックのみを (html に) 含め、実行時にロードして .play(); を呼び出します。これは機能しますが、150 以上のオーディオ ブロックを作成する必要があることを意味します。（これはどこでも機能します）
- 「Audio」の新しいインスタンスを作成し、.src 属性を動的に設定してから、loadcomplete で .play() を呼び出します (これはデスクトップ ブラウザーでのみ機能し、モバイルでは機能しないようです)。
- jQueryを使用して新しいオーディオタグを作成し、domに追加し、ロードを待ってから再生します（これはデスクトップブラウザーでのみ機能し、モバイルでは機能しないようです）
- html に Audio タグを追加して、ロードしないように指示し、ユーザーの操作を待ってからロードし、準備が整うのを待ってから再生します (これはどこでも機能します)。
それで、大きな問題は、なぜこれがうまくいかないのかということです。
** 編集 ** 一度に 1 つのファイルしか再生できないことはわかっています。それがここでやろうとしていることです。プロジェクトは (機能的に) 電話サービスに似ており、1 人が 0 から 9 までの数字を記録すると、'5'.'5'.'5'.'0'.'1 のように電話番号を「読み上げ」ます。 '.....などです。したがって、一度に 1 つのオーディオ ストリーム出力は完全に許容されます...それを再生するだけで、これが問題です。
現在、私は次のコードを持っています。これもここにあります
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
var $a1, $a2, $a3, $a4;
$(document).ready( function(){
_setupVars();
_addListeners();
})
function _setupVars(){
$a1 = $( "#audio1");
$a2 = $( "#audio2");
$a3 = $( "#audio3");
$a4 = $( "#audio4");
}
function _addListeners(){
$a1.click( _handleAudio1 );
$a2.click( _handleAudio2 );
$a3.click( _handleAudio3 );
$a4.click( _handleAudio4 );
}
function _handleAudio1 (){
$("#america")[0].play();
}
function _handleAudio2 (){
var a = new Audio();
$(a).on("canplay", function(){
a.play();
})
if(a.canPlayType("audio/mp3"))
a.src = "audio/test2.mp3";
else if(a.canPlayType("audio/ogg"))
a.src = "audio/test2.ogg";
}
function _handleAudio3 (){
var $x = $('<audio id="says">'+
'<source src="audio/test3.mp3">'+
'<source src="audio/test3.ogg">'+
'</audio>');
$x.on("canplay", function(){
$x[0].play();
})
$("#audioCont").append($x);
}
function _handleAudio4(){
var $x =$("#cat");
$x.on("canplay", function(){
$x[0].play();
})
$x[0].load();
}
</script>
</head>
<body>
<input type="button" id="audio1" value="play Audio Tag"/><br />
<input type="button" id="audio2" value="play audio object"/><br />
<input type="button" id="audio3" value="play dynamic Audio Tag"/><br />
<input type="button" id="audio4" value="play load Audio Tag, then play"/><br />
<audio id="america">
<source src="audio/test1.mp3">
<source src="audio/test1.ogg">
</audio>
<audio id="cat">
<source src="audio/test4.mp3">
<source src="audio/test4.ogg">
</audio>
</body>
</html>