자바스크립트로 소리 알림 재생?
어떻게 하면 사용자가 링크를 클릭할 때마다 사운드를 재생할 수 있습니까?javascript와 jquery를 여기서 사용합니다.
이 플러그인 사용: https://github.com/admsev/jquery-play-sound
$.playSound('http://example.org/sound.mp3');
집어넣습니다.<audio>
페이지에 요소가 있습니다.
오디오 요소를 가져와서 전화하기play()
방법:
document.getElementById('yourAudioTag').play();
이 예를 확인해 보십시오: http://www.storiesinflight.com/html5/audio.html
이 사이트에서는 다음과 같은 다른 멋진 작업을 수행할 수 있습니다.load()
,pause()
, 그리고 오디오 요소의 몇 가지 다른 속성들.
이 오디오 요소를 정확히 언제 재생할지는 사용자가 결정합니다.단추의 텍스트를 읽고 원한다면 "아니오"와 비교해 보십시오.
또는
http://www.schillmania.com/projects/soundmanager2/
사운드 매니저 2는 IE 6+를 포함한 모든 최신 브라우저에서 사운드를 재생할 수 있는 간편한 API를 제공합니다.브라우저가 HTML5를 지원하지 않으면 플래시의 도움을 받습니다.HTML5를 엄격하게 사용하고 플래시를 사용하지 않으려면 플래시=를 선호합니다.
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/
다음과 같은 것을 발견했습니다.
//javascript:
function playSound( url ){
document.getElementById("sound").innerHTML="<embed src='"+url+"' hidden=true autostart=true loop=false>";
}
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 append 없이 직접 HTML에 오디오 임베딩을 추가했습니다.
자바스크립트 사운드 매니저:
http://www.schillmania.com/projects/soundmanager2/
$('a').click(function(){
$('embed').remove();
$('body').append('<embed src="/path/to/your/sound.wav" autostart="true" hidden="true" loop="false">');
});
나는 웹 오디오 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);
};
새로운 창궐자...IE, Gecko 브라우저, iPhone과 호환이 되는 것 같습니다.
다음 코드는 자바스크립트만을 사용하여 웹 페이지에서 소리를 재생하는 데 도움이 될 수 있습니다.자세한 내용은 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>
우선, 저는 사용자로서 그런 것을 좋아하지 않습니다.
가장 좋은 방법은 백그라운드에서 사운드를 재생하는 작은 플래시 애플릿을 사용하는 것일 것입니다.
자바스크립트에서 사운드를 재생하는 크로스 플랫폼, 크로스 브라우저 방식도 여기에 답했습니다.
언급URL : https://stackoverflow.com/questions/450033/playing-sound-notifications-using-javascript
'programing' 카테고리의 다른 글
ORA-12557 TNS: 프로토콜 어댑터를 로드할 수 없음 (0) | 2023.11.04 |
---|---|
괄호가 "typedefint (f)(void)"인 typedef는 무엇을 의미합니까?기능 시제품입니까? (0) | 2023.11.04 |
jQuery를 사용하지 않는 경험적인 기술적 이유는 무엇입니까? (0) | 2023.11.04 |
파워셸에서 @()의 의미는 무엇입니까? (0) | 2023.10.30 |
Cree(): 포인터가 잘못되었습니다. (0) | 2023.10.30 |