8

私はネイティブHTMLプログラマーではないので、この簡単な質問について飛び越えないでください。

次のコードを使用して表示している画像があります。

 <img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" />

その画像をクリックしたときにサウンドファイルを再生したい。画像をボタンにすることはできますが、それが何らかの理由でページのレイアウトを台無しにしています。

どんなプレイヤーでも大丈夫ですが、邪魔なプレイヤーを表示したくないということだけです。ユーザーに画像を押して音楽を聴いてもらいたいだけです。彼が別の画像を押すと、現在の音楽の再生を停止し、別のサウンドを再生する必要があります。

助けてください！ありがとう！

4

3 に答える 3

5

まず、jQueryを使用する必要があります。<div>たとえば、ページにIDを持つものを作成できます。

<div id="wrap">&nbsp;</div>。

次に、JavaScriptで、ファイルを再生するときに、追加するだけです。

$('#wrap').append('<embed id="embed_player" src="audio.wav" autostart="true" hidden="true"></embed>');

コード全体は次のようになります。

<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#track1').click(function(){
   $('#wrap').append('<embed id="embed_player" src="audio.wav" autostart="true" hidden="true"></embed>');
});
});
</script>
<img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" />
<div id="wrap">&nbsp;</div>

お役に立てれば。

于 2012-04-10T07:10:51.257 に答える
5

@klaustopher によるこの回答は私を助けました。彼が書きました：

HTML5には、サウンドの再生に使用できる新しい-Tagがあります。非常にシンプルなJavaScriptインターフェースもあります。

  <audio id="sound1" src="yoursound.mp3" preload="auto"></audio>
  <button onclick="document.getElementById('sound1').play();">Play
  it</button>

Font Awesomeアイコン「fa-volume-up」（Webページの「mule」の後にあります）をクリックすると「donkey2.mp3」のサウンドが再生されるように、彼のアドバイスを実装した方法は次のとおりです（注：mp3は再生されません）すべてのブラウザで）：

<p>In short, you're treated like a whole person, instead of a rented mule. 
<audio id="sound1" src="assets/donkey2.mp3" preload="auto"></audio>
<a class="icon fa-volume-up" onclick="document.getElementById('sound1').play();"></a></p>
于 2015-09-26T18:24:07.400 に答える
0 
<html>    
    <body>
        <div id="container">
             <img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" class="play" />
        </div>
    </body>
</html>



<script>
        $(document).ready(function() {
            var audioElement = document.createElement('audio');
            audioElement.setAttribute('src', 'audio.mp3');
            audioElement.setAttribute('autoplay', 'autoplay');
            //audioElement.load()

            $.get();

            audioElement.addEventListener("load", function() {
                audioElement.play();
            }, true);

            $('.play').click(function() {
                audioElement.play();
            });

            $('.pause').click(function() {
                audioElement.pause();
            });
        });
    </script>
于 2013-11-05T04:44:38.223 に答える