1

Web ページのボタンをクリックすると、ランダムなサウンドが再生されるようにします。私はそれをかなり調査しましたが、この議論が最も役に立ちました: http://www.elated.com/forums/topic/5196/

ある投稿者は、次のように、ボタンがクリックされるたびに実行される Javascript 関数を作成することを推奨しました。

<script>
function playSound() {
  var sounds = [
    "http://www.mysite.com/1.wav",
    "http://www.mysite.com/2.wav",
    "http://www.mysite.com/3.wav"
  ];

  **// Choose a random sound here and play it**
}
</script>

音の配列を作る部分は理解できました。私は、ランダムな配列要素を選択することについての部分を理解していると思います。ポスターが推奨するように、JS関数内でサウンドを再生する方法に固執しています。JS 関数内で HTML5 オーディオ タグを使用できますか?

ファイルを実際に再生するためのコードが関数の内部にあるか外部にあるかは気にしません。実際には、最初は要素をランダムに選択するためだけに JS を使用し、次に JS 関数によって返された配列の要素を HTML の行で再生するつもりでした。JS関数の戻り値をHTMLで再生したいという指定の仕方がわからなかったので断念しました。

ありがとうございました。

4

3 に答える 3

2

JavaScript を使用してサウンドを追加する

次のスクリプトを<head>HTML ドキュメントの に配置します。

<script language="javascript" type="text/javascript">
 function playSound(soundfile) {
 document.getElementById("dummy").innerHTML=
 "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
 }
 </script>

サウンドは空のスパンに配置されます

JavaScript は、スクリプトが開始されると、空の span タグ内に埋め込みタグを配置します。したがって、次のスパン ファイルを HTML ページの本文内のどこかに追加する必要があります。

<span id="dummy"></span>

onmouseover または onclick 属性を使用してスクリプトを呼び出す

最後に追加する必要があるのは、クリックまたはマウスオーバーでサウンドを生成する要素です。これらの属性のいずれかでスクリプトを呼び出します。

<a href="#" onclick="playSound('URL to soundfile');">Click here to hear a sound</a>

 <p onmouseover="playSound('URL to soundfile');">Mouse over this text to hear a sound</p>
于 2012-06-14T19:30:02.090 に答える
1

オーディオ要素の ID を持っている場合は、次のことができます。

document.getElementById(theId).play();

audio 要素は次のようになります。

<audio id="someId">
    <source src=sound/zbluejay.wav>
</audio>

必要に応じて、次のように audio 要素を動的に追加できます。

document.write("<audio id=someId><source src=yourURL</audio>");
document.getElementById('someId').play();​​​​

ここでフィドル。

于 2012-06-14T19:28:06.443 に答える
1

これをテストしていませんが、うまくいくはずです。私は基本的に配列からランダムな文字列を選択し、埋め込み要素を id "要素" で div に配置し、それからサウンドを開始します。

<script>
function playSound() {
  var sounds = new Array(
    "http://www.mysite.com/1.wav",
    "http://www.mysite.com/2.wav",
    "http://www.mysite.com/3.wav"
  );

$.("#element").html("<embed src=\""+Math.floor(Math.random()*(sounds.length+1))+"\" autostart=\"true\" />");

}
</script>

編集：私はこれをテストしました：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
function playSound() {
  var sounds = new Array(
    "file:///X:/test.mp3"
  );

$("#element").html("<embed src=\""+sounds[Math.floor(Math.random()*(sounds.length+1))]+"\" hidden=\"true\" autostart=\"true\" />");
}
</script>
</head>
<body onload="javascript:playSound()">

<div id="element">
</div>
</body>

</html>
于 2012-06-14T19:32:45.907 に答える