Question

每次下面代码中的文字淡入时，播放短铃声的最佳方法是什么？

我读到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);
}

Answer 1

欢迎使用Stack Overflow！

嗯，首先;该代码看起来效率很低。不太确定你在做什么，因为它已经脱离了上下文，所以如果你能向我们展示一点，那就太好了。

无论如何，为了尝试回答你的问题，HTML5有native support for audio playback，但也许你需要一个更加跨浏览器友好的解决方案？

使用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();
});

你可以try this out at jsFiddle

播放声音与文字fadein

1 个答案: