0

視聴者がさまざまな画像にカーソルを合わせたときに複数のオーディオ ファイルを再生しようとしていますが、プレーヤー/バー/機能を画面に表示したくありません。視聴者に画像の上にカーソルを合わせてもらいたいだけです。ユーザーがカーソルを離しても、再生は終了します。すべての画像が apDiv タグに配置されています

$(function(){
    $('#apDiv3').hover(
    function() { $("killyou")[0].play(); },
    function() { $("killyou")[0].pause(); }
    )
});


<audio id="killyou" controls preload="auto">
    <source src="iwilkillyou.mp3" type="audio/mpeg"></source>
    <div id="apDiv3">
        <img src="explosion_by_dbszabo1-d3hmssu.png" width="175" height="5">
    </div>
</audio>

ホバリングするとサウンドが再生されますが、複数の画像には使用できず、マウスが画像から離れるとサウンドが停止します。htmlとJQueryを使用するのは初めてです。誰でも助けてくれますこれとともに？ありがとうございました！

4

1 に答える 1

0

（編集：質問を読み直してください）

多分：

$('.audio-source img').mouseover(function() {
    $('player source').attr('src', $(this).data('file'))
            .parent()[0].play();
});

HTML の場合:

<audio hidden id="player" controls preload="auto">
    <source src="default-audio.mp3" type="audio/mpeg"></source>
</audio>
<div class="audio-source">
    <img data-file="foo.mp3" src="image-1.png"/>
    <img data-file="bar.mp3" src="image-2.png"/>
    <img data-file="baz.mp3" src="image-3.png"/>
</div>

ただし、現在それをテストすることはできません。

jQuery 関数.hover(on, off)は、マウス オーバー用とマウス オフ用の 2 つの関数をバインドします。必要なのはマウスをオンにするだけなので、機能を使用できます.mouseover(function)。jQuery スニペットが行うことは、カーソルを合わせた画像から属性を取得し、それをタグの属性にdata-file適用することです。次に、タグである親を取得し、DOM ノードを呼び出します。src<source><audio>play()

于 2013-04-08T08:09:49.280 に答える