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

欢迎来到堆栈溢出！

好吧，首先；该代码看起来效率很低。不太确定你在做什么，因为它被断章取义了，所以如果你能再向我们展示一点就好了。

无论如何，要尝试回答您的问题 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 回答