0

以下のコードのテキストがフェードインするたびに短いベル音を再生する最良の方法は何ですか?

jplayerがおそらく最良の選択肢であると読みましたか?

jquery.sound を試しましたが、Firefox では、Quicktime がインストールされていない場合、「プラグインのインストール」ボックスが無限に表示されます。

$(function(){
  $(window).mousemove(function(){
    runIt();
  });
  runIt();      
})

function runIt() {
  var it = $('#myText');
  it.stop(true,true).clearQueue().fadeOut(1).animate({left:0},500).queue(function(){
    it.html('Start Again');
    it.dequeue();
  })
  it.fadeIn(500).animate({left:0},5000).fadeOut(1000).queue(function(){
    it.html('test 1');
    it.dequeue();
  })
  it.fadeIn(1000).animate({left:0},5000).fadeOut(1000).queue(function(){
    it.html('test 2');
    it.dequeue();
  })
  it.fadeIn(1000).animate({left:0},5000).fadeOut(1000).queue(function(){
    it.html('test 3');
    $(window).unbind('mousemove');
    it.dequeue();
  })
  it.fadeIn(1000);
}
4

1 に答える 1

1

Stack Overflowへようこそ！

そもそも、そのコードは本当に非効率に見えます。文脈から外されているので、これで何をしているのかよくわかりません。もう少し見せていただければ幸いです。

とにかく、あなたの質問に答えるために、HTML5はオーディオ再生をネイティブでサポートしていますが、クロスブラウザにやさしいソリューションが必要かもしれません。

HTML5では、これを行うだけで済みます。

var sample = new Audio("file.mp3");
sample.play();

個人的には、ブラウザがHTML5オーディオをサポートしていない場合は、他のソリューションを使用せず、サイレントのままにします。

編集：私はコードをもう少し詳しく読んで、あなたが場所でキューをクリア/停止していることに気づきました。ただし、マウスを少し動かすたびにトリガーするかどうかはわかりません:)

編集2：私はあなたのコードとjPlayer（可能であればHTML5オーディオを使用する）で少し遊んでみて、これで終わりました：

$(function() {

    var element = $('#myText'),
        jPlayer = $("#jPlayer").jPlayer({
            ready: function() {
                $(this).jPlayer("setMedia", {
                    wav: "http://www.ibiblio.org/pub/multimedia/pc-sounds/ding.wav"
                });
            },
            supplied: "wav"
        });

    function jPlay() {   
        jPlayer.jPlayer("stop").jPlayer("playHead", 0).jPlayer("play");
    }

    function runIt() {
        element
            .stop(true, true)
            .clearQueue()
            .fadeOut(1)
            .animate({
                left: 0
            }, 500)
            .queue(function() {
                jPlay();
                element
                    .html('Start Again')
                    .dequeue();
            })
            .fadeIn(500)
            .animate({
                left: 0
            }, 5000)
            .fadeOut(1000)
            .queue(function() {
                jPlay();
                element
                    .html('test 1')
                    .dequeue();
            })
            .fadeIn(1000)
            .animate({
                left: 0
            }, 5000)
            .fadeOut(1000).queue(function() {
                jPlay();
                element
                    .html('test 2')
                    .dequeue();
            })
            .fadeIn(1000)
            .animate({
                left: 0
            }, 5000)
            .fadeOut(1000)
            .queue(function() {
                jPlay();
                $(window).unbind('mousemove');
                element
                    .html('test 3')
                    .dequeue();
            })
            .fadeIn(1000);
    }
    $(window).mousemove(function() {
        //runIt();
    });
    runIt();
});

jsFiddleでこれを試すことができます

于 2011-05-03T12:02:01.773 に答える