播放伴隨文字淡變的聲音

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