자바 스크립트를 사용하여 알림 음을 재생 하시겠습니까?


86

어떻게하면 사용자가 링크를 클릭 할 때마다 사운드가 재생됩니까? 여기에서 javascript 및 jquery 사용.


2
나는 오디오 제어를위한 jQ 플러그인 soundplay.nikolavukovic.net63.net 을 작성했습니다. 그것은 당신이 요구하는 것을 지원하고 더 많은 것을 지원하며, 문서는 JavaScript 코드와 함께 번들로 제공됩니다.
공개 오버라이드

할 수 있습니다 페이지 음향 효과의 무리와 채우기 재생 목록 (들) (예를 들어) .load(), .play()API를 사용하여 중요한 순간에 그들.
공개 오버라이드

1
거룩한 모든 것에 대한 사랑을 위해 음소거 옵션을 포함하십시오. 소리가있는 링크는 사용자가 사이트를 다시 방문하지 않도록하는 가장 빠른 방법 중 하나입니다.
Wobbles

답변:



25

<audio>페이지에 요소를 넣으십시오 .
오디오 요소를 가져오고 play()메서드를 호출합니다 .

document.getElementById('yourAudioTag').play();

이 예를 확인하십시오. http://www.storiesinflight.com/html5/audio.html

이 사이트load() 에서는 pause(), 및 오디오 요소의 몇 가지 다른 속성 과 같이 수행 할 수있는 다른 멋진 작업에 대해 알아 봅니다.

이 오디오 요소를 정확히 재생하려는 경우는 귀하에게 달려 있습니다. 버튼의 텍스트를 읽고 원하는 경우 "아니오"와 비교하십시오.

또는

http://www.schillmania.com/projects/soundmanager2/

SoundManager 2는 IE 6+를 포함한 모든 최신 브라우저에서 사운드를 재생할 수있는 사용하기 쉬운 API를 제공합니다. 브라우저가 HTML5를 지원하지 않으면 플래시에서 도움을받습니다. 엄격한 HTML5를 원하고 플래시를 원하지 않는 경우이를위한 설정이 있습니다. preferFlash = false

iPad, iPhone (iOS4) 및 기타 HTML5 지원 장치 + 브라우저에서 100 % 플래시없는 오디오를 지원합니다.

사용은 다음과 같이 간단합니다.

<script src="soundmanager2.js"></script>
<script>
// where to find flash SWFs, if needed...
soundManager.url = '/path/to/swf-files/';

soundManager.onready(function() {
    soundManager.createSound({
        id: 'mySound',
        url: '/path/to/an.mp3'
    });

    // ...and play it
    soundManager.play('mySound');
});

실제 데모는 다음과 같습니다. http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/


21

다음과 같은 것을 찾았습니다.

//javascript:
function playSound( url ){   
  document.getElementById("sound").innerHTML="<embed src='"+url+"' hidden=true autostart=true loop=false>";
} 

5
이것은 느리게하는 것입니다. Windows 브라우저로 재생하는 데 거의 1 초가 걸립니다
thenengah

응용 프로그램에 따라 달라지는 @Codeglot. 1 초가 내 요구 사항을 충족합니다.
Muhd 2011

1
또한 지연을 없애기 위해 미리로드 할 수도 있습니다.
Muhd

9
지연은 DOM 구문 분석, 파일로드 및 시작에서 발생합니다. 미리로드 한 경우 필요할 때 바로 시작할 수 있습니다 .
Xeoncross 2012 년

mousedown 이벤트 후 1 초는 긴 시간입니다. 너무 오래.
TARKUS

12

html5 오디오 태그 및 jquery 사용 :

// appending HTML5 Audio Tag in HTML Body
$('<audio id="chatAudio">
    <source src="notify.ogg" type="audio/ogg">
    <source src="notify.mp3" type="audio/mpeg">
</audio>').appendTo('body');

// play sound
$('#chatAudio')[0].play();

여기에서 코드 .

내 구현에서 jquery를 추가하지 않고 HTML에 오디오 임베드를 직접 추가했습니다.


2
참고로, 나는 ajax 함수 (페이지로드시 실행)에서 성공 핸들러에서 소리를 재생하고 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document firstVersion 70.0.3538.102 (Official Build) (64-bit)
있으며이



3

Web Audio API로 할 수있는 작은 함수를 작성했습니다 ...

var beep = function(duration, type, finishedCallback) {

    if (!(window.audioContext || window.webkitAudioContext)) {
        throw Error("Your browser does not support Audio Context.");
    }

    duration = +duration;

    // Only 0-4 are valid types.
    type = (type % 5) || 0;

    if (typeof finishedCallback != "function") {
        finishedCallback = function() {};   
    }

    var ctx = new (window.audioContext || window.webkitAudioContext);
    var osc = ctx.createOscillator();

    osc.type = type;

    osc.connect(ctx.destination);
    osc.noteOn(0);

    setTimeout(function() {
        osc.noteOff(0);
        finishedCallback();
    }, duration);

};


1

다음 코드는 자바 스크립트 만 사용하여 웹 페이지에서 사운드를 재생하는 데 도움이 될 수 있습니다. http://sourcecodemania.com/playing-sound-javascript-flash-player/ 에서 자세한 내용을 볼 수 있습니다 .

<script>
function getPlayer(pid) {
    var obj = document.getElementById(pid);
    if (obj.doPlay) return obj;
    for(i=0; i<obj.childNodes.length; i++) {
        var child = obj.childNodes[i];
        if (child.tagName == "EMBED") return child;
    }
}
function doPlay(fname) {
    var player=getPlayer("audio1");
    player.play(fname);
}
function doStop() {
    var player=getPlayer("audio1");
    player.doStop();
}
</script>

<form>
<input type="button" value="Play Sound" onClick="doPlay('texi.wav')">
<a href="#" onClick="doPlay('texi.wav')">[Play]</a>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    width="40"
    height="40"
    id="audio1"
    align="middle">
    <embed src="wavplayer.swf?h=20&w=20"
        bgcolor="#ffffff"
        width="40"
        height="40"
        allowScriptAccess="always"
        type="application/x-shockwave-flash"
        pluginspage="http://www.macromedia.com/go/getflashplayer"
    />
</object>

<input type="button" value="Stop Sound" onClick="doStop()">
</form>

0

먼저 사용자로서 그게 싫습니다.

가장 좋은 방법은 배경에서 사운드를 재생하는 작은 플래시 애플릿을 사용하는 것입니다.

또한 여기에 대답했습니다 : Javascript에서 사운드를 재생하는 크로스 플랫폼, 크로스 브라우저 방법?


3
사용자가 소리가 재생된다는 것을 안다면 무엇이 그렇게 나쁜가요?
lc.

3
새 주문이 도착했을 때 사용자에게 경고음이 필요한 경우에는 어떻게해야합니까? 아마도 사용자가 아마도 난 그냥 몇 가지 예 .. 오줌을 필요로하고 다른 사람이 순서를 대답 할 수는 BEEP를 켜고 화면에 눈으로 내내 아니다 ..
deepcell
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.