플레이 사운드

Question

짧은 벨 때마다 내 아래 코드 페이드의 텍스트를에서 소리를 재생하는 가장 좋은 방법은 무엇입니까?

나는 jplayer 아마도 최선의 선택이라고 읽어?

나는 jquery.sound을 시도했지만 파이어 폭스에서이 설치된 퀵타임이없는 경우 무한히 표시하기 위해 "플러그인을 설치"상자가 발생합니다.

$(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

오신 것을 환영합니다 스택 오버플로!

음,로 시작합니다; 그 코드는 실제로 비효율적 인 것처럼 보입니다. 컨텍스트에서 벗어난 이후로이 작업으로 무엇을하는지 확신 할 수 없으므로 우리를 조금 더 보여줄 수 있다면 좋을 것입니다.

어쨌든, 시도 및 HTML5가 native support for audio playback을 가지고 있지만 어쩌면 더 크로스 브라우저 친화적 솔루션이 필요 귀하의 질문에 대답? HTML5와

만이 작업을 수행해야한다 :

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

는 개인적으로 나는 다른 솔루션과 함께 가서 침묵 브라우저가 HTML5 오디오를 지원하지 않는 경우 떠나지 않을 것입니다.

편집 : 나는 조금 더 가까이 코드를 읽고 당신이 장소에서 큐를 정지/취소된다 깨달았다. 그래도 마우스를 조금씩 움직일 때마다 트리거하는 것에 대해 확신하지는 못했습니다.

편집 2 : 가능한 경우 HTML5 오디오를 사용하는 jPlayer와 코드를 사용하여 자유롭게 플레이 한 다음 :

$(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