3

再生ボタンをクリックまたはホバーしたときにサウンドを再生しようとしていますか? これが私がこれまでに持っているものです。ボタンがあり、その上にカーソルを合わせると画像が変更されます。mp3 も再生したいです。

play a {
    position:relative;
    float:left;
    width:155px;
    height:134px;
    background-image:url(../images/Goodsound_PLAY_UP.png);
}
play a:hover {
    background-image:url(../images/Goodsound_PLAY_P.png);

I want to play a sound here

}

こんな簡単な質問してすみません。私は先週始めた HTML 初心者です。

4

4 に答える 4

3

HTML でサウンドを再生するのはそれほど簡単ではありません。実際、html5audioが登場するまではそうではありませんでした。html5 がどこでもサポートされているわけではありませんが、ブラウザでサウンドを再生するのが少し簡単になりました。

私のアドバイスは、古いブラウザーと html5 オーディオ (およびビデオ) 仕様の間のギャップを埋める JavaScript ライブラリであるmediaelementJSを使用することです。プレーヤー (完全なコントロール バーが付属しています) は使用せず、mediaelementjs コンポーネントのみを使用してください。それを使用するには、ライブラリをページのヘッドに含めるだけです

<script src="js/libs/mediaelement.min.js"></script>

まず、オーディオ タグを html に配置する必要があります。

<audio id="mySound" src="my_audio_file.mp3" type="audio/mpeg"></audio>

次に、Mediaelement ライブラリを呼び出します

var mySound = new MediaElement('mySound');

最後に、クリックまたはオーバー イベントで再生します (ここでは jQuery を使用します)。

$('.play a').mouseover(function(){ mySound.play() });
于 2012-06-24T19:46:36.673 に答える
2

あなたはこれを使うことができます：

JavaScript

var audio = $("#audio");
$("play a").mouseenter( function() {
    audio.play();
}

ここaudioで、は<audio>要素play aであり、はホバーである要素です。

于 2012-06-24T19:45:10.220 に答える
1

jQuery の使用:

$("object_element_id") .on ('mouseover', function(e){
    // audio play code here
});

$("object_element_id") .on ('mouseout', function(e){
    // audio pause/stop code here
});

なぜ「オン」なの？「AJAX ページの更新」を想像してみてください。それを削除するには：

$("object_element_id") .off ('mouseenter');

なぜ「マウスオーバー」と「マウスアウト」なのですか? ボタンの IMG SRC を変更したり、いくつかのエフェクトを作成したりするなど、各ステータスに追加の機能を追加したい場合があります。お気軽に。そして、なぜ「e」要素なのですか? E 要素は、イベントを発生させたオブジェクト (画像、リンクなど) です。すべての操作を行います (または単に削除します)。

オーディオの再生には、HTML5 タグを使用できます。簡単で、主要なブラウザでサポートされています（「レトロ互換性」は尋ねていません）要素をキャッシュして（Mateuszの回答のように）使用できます：

var $audio = $("#audio_element_id"); //for cache the element
$audio.setAttribute('src', url_link); //for change the URL file (ir can be MP3, OGG...)

$audio.play(); //for the mouseover
$audio.stop(); //for the mouseout

次に、最終的なコード:

var $audio = $("audio_element"); //caching

$("object_element_id") .on ('mouseover', function(e){
    $audio.play();
});

$("object_element_id") .on ('mouseout', function(e){
    $audio.stop();
});
于 2013-11-13T12:48:05.140 に答える