Development Tip

Javascript에서 사운드를 재생하는 크로스 플랫폼, 크로스 브라우저 방법?

yourdevel 2020. 10. 12. 08:15
반응형

Javascript에서 사운드를 재생하는 크로스 플랫폼, 크로스 브라우저 방법?


시스템의 대화 형 시뮬레이션을 만드는 dhtml 응용 프로그램을 작성 중입니다. 시뮬레이션 용 데이터는 다른 도구에서 생성되며 이미 많은 양의 레거시 데이터가 있습니다.

시뮬레이션의 일부 단계에서는 오디오 "보이스 오버"클립을 재생해야합니다. 여러 브라우저에서이 작업을 쉽게 수행 할 수있는 방법을 찾지 못했습니다.

Soundmanager2 는 내가 필요한 것과 거의 비슷하지만 mp3 파일 만 재생하며 레거시 데이터에는 일부 .wav 파일도 포함될 수 있습니다.

누구에게 도움이 될만한 다른 라이브러리가 있습니까?


.wav 파일을 처리하려면 Real Audio 또는 QuickTime과 같은 플러그인을 포함해야하지만 작동합니다.

//======================================================================
var soundEmbed = null;
//======================================================================
function soundPlay(which)
    {
    if (!soundEmbed)
        {
        soundEmbed = document.createElement("embed");
        soundEmbed.setAttribute("src", "/snd/"+which+".wav");
        soundEmbed.setAttribute("hidden", true);
        soundEmbed.setAttribute("autostart", true);
        }
    else
        {
        document.body.removeChild(soundEmbed);
        soundEmbed.removed = true;
        soundEmbed = null;
        soundEmbed = document.createElement("embed");
        soundEmbed.setAttribute("src", "/snd/"+which+".wav");
        soundEmbed.setAttribute("hidden", true);
        soundEmbed.setAttribute("autostart", true);
        }
    soundEmbed.removed = false;
    document.body.appendChild(soundEmbed);
    }
//======================================================================

Prototype을 사용하는 경우 Scriptaculous 라이브러리 에는 사운드 API가 있습니다. jQuery 에도 플러그인이있는 것 같습니다 .


dacracots 코드는 깨끗한 기본 돔이지만 아마도 두 번째 생각없이 작성 되었을까요? 물론 이전 임베드의 존재를 먼저 확인하고 중복 임베드 생성 라인을 저장하십시오.

var soundEmbed = null;
//=====================================================================

function soundPlay(which)
{
    if (soundEmbed)
       document.body.removeChild(soundEmbed);
    soundEmbed = document.createElement("embed");
    soundEmbed.setAttribute("src", "/snd/"+which+".wav");
    soundEmbed.setAttribute("hidden", true);
    soundEmbed.setAttribute("autostart", true);
    document.body.appendChild(soundEmbed);
}

비슷한 상황에 대한 해결책을 찾는 동안 여기에서 생각을 발견했습니다. 불행히도 내 브라우저 Mozilla / 5.0 (X11; U; Linux i686; en-US; rv : 1.9.0.15) Gecko / 2009102814 Ubuntu / 8.04 (강건한) Firefox / 3.0.15는 이것을 시도하면 죽습니다.

최신 업데이트를 설치 한 후에도 firefox는 여전히 충돌하고 Opera는 살아 있습니다.


가장 간단하고 편리한 방법은 작은 플래시 클립을 사용하여 사운드를 재생하는 것입니다. JavaScript 솔루션은 아니지만 목표를 달성하는 가장 쉬운 방법입니다.

이전 유사한 질문 의 추가 링크 :


dacracot의 대답이 마음에 들었습니다 ... 여기에 jQuery의 비슷한 솔루션이 있습니다.

function Play(sound) {
    $("#sound_").remove()
    $('body').append('<embed id="sound_" autostart="true" hidden="true" src="/static/sound/' + sound + '.wav" />');
}

HTML5 <audio>태그를 사용할 수 있습니다 .


Mootools를 사용하는 경우 MooSound 플러그인이 있습니다.


<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

자세한 내용은 http://www.w3schools.com/html/html5_audio.asp 를 참조하십시오.


There is a far more simpler solution to this rather than having to resort to plug-ins. IE has it's own bgsound property and there is another way you can make it work for all other browsers. Check out my tutorial here = http://www.andy-howard.com/how-to-play-sounds-cross-browser-including-ie/index.html

참고URL : https://stackoverflow.com/questions/187098/cross-platform-cross-browser-way-to-play-sound-from-javascript

반응형