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


78

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

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

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

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


5
솔루션을 찾으 셨다니 다행이지만 그와는 별개로 해당 .wav 파일을 .mp3 파일로 변환하는 것이 좋습니다. 음질을 조금만 낮추면 웨이브 파일 크기의 1/3에서 1/10까지 파일 크기를 줄일 수 있습니다. 소리를 재생할 때 좀 더 반응이 좋을 수 있습니다.
infocyde

답변:


61

.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);
    }
//======================================================================

15
나는 반대표를 이해하지 못합니다. 작동합니다. 내 응용 프로그램에 배포했습니다. 왜 반대표를받을 자격이 있습니까?
dacracot

2
왜 당신이 "진짜 오디오"나 "빠른 시간"이라는 단어를 사용하기 위해 투표를했는지 모르겠습니다 .. ?? 당신에게 반대표를 던진 사람이 어떻게되었는지 전혀 몰랐 을까요? 저의 경우 +1, 귀하의 코드는 가장 많이 받아 들여지는 답변에 명시된 jQuery 플러그인에 사용 된 것과 거의 동일합니다.
koni

1
때때로 나는 당신이 말했듯이 똑같은 일을하는 현재의 인기있는 API라고 부르기보다는 코드를 작성했기 때문이라고 생각합니다.
dacracot

1
내 문제에 대한 훌륭한 솔루션입니다. +1.
mauris

3
그러나 FF3.0에서 사운드 파일을 재생하지 않는 것 같습니다. Chrome 3, IE7에서 작동합니다.
mauris

9

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


5
jQuery 플러그인 링크는 403으로 응답합니다.
Arion

대답의 두 번째 링크는 "이 사이트에 연결할 수 없습니다" 입니다.
Pang

@Pang이 질문에 대한 모든 답변은이 시점에서 오래되었습니다. 요즘에는 보편적으로 지원되는 HTML5 오디오 API를 사용하고 싶을 것입니다. 나는이 질문을 더 최신의 질문과 중복하여 마감했습니다.
ceejayoz

8

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는 살아 있습니다.


7

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

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


1
하지만 WAV 파일을 재생할 플래시 솔루션을 찾을 수 없습니다. 플래시는 MP3 만 지원하는 것 같습니다. scriptaculous의 플러그인을 살펴 보 겠지만,이 기능에 대한 전체 추가 라이브러리를 포함하고 싶지 않습니다.
Jake Stevenson

5

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


이 질문은 특별히 "크로스 플랫폼, 크로스 브라우저"솔루션을 요구했습니다. HTML5의 <audio>: 태그 IE8-, 안드로이드 2.2-, iOS의 사파리 3.2- 또는 오페라 미니에 일을하지 않는 caniuse.com/#feat=audio
Jasdeep Khalsa

2018 HTML5 Audio의 NB는 Opera를 제외한 모든 사용자가 지원합니다.
Aidan Connelly

5

나는 dacracot의 대답을 좋아했습니다 ... 여기에 jQuery의 비슷한 솔루션이 있습니다.

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



1

플러그인에 의존하는 것보다 훨씬 더 간단한 해결책이 있습니다. IE에는 자체 bgsound 속성이 있으며 다른 모든 브라우저에서 작동하도록 만들 수있는 또 다른 방법이 있습니다. 여기에서 내 튜토리얼을 확인하십시오 = http://www.andy-howard.com/how-to-play-sounds-cross-browser-include-ie/index.html


귀하의 솔루션이 흥미로워 보입니다. 시도해 보겠습니다. 링크 한 페이지에 IE11에서 오디오가 무한 루프로 실행되고 있음을 나타내는 주석이 있습니다. 이것이 여전히 문제입니까? 그것을 피할 수있는 방법이 있습니까?
Kevin Fegan

0

wav 파일과 크로스 브라우저 솔루션을 위해 내가 할 제안 <audio>태그 기본 다음에 갈 <embed>@dacracot 이전에 제안하는 것이 해결책 여기에 사용자가 IE에있는 경우, 당신은 여기에 SO에 약간의 검색을 쉽게 확인할 수 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.