특정 이벤트가 발생하면 웹 사이트에서 사용자에게 짧은 알림 음을 재생하고 싶습니다.
웹 사이트가 열릴 때 소리가 (즉시) 자동 시작 되지 않아야합니다 . 대신 JavaScript를 통해 요청시 재생되어야합니다 (특정 이벤트가 발생할 때).
이전 브라우저 (IE6 등)에서도 작동하는 것이 중요합니다.
따라서 기본적으로 두 가지 질문이 있습니다.
- 어떤 코덱을 사용해야합니까?
- 오디오 파일을 포함하는 가장 좋은 방법은 무엇입니까? (
<embed>
vs.<object>
vs. 플래시 vs.<audio>
)
답변
이 솔루션은 거의 모든 브라우저에서 작동합니다 (플래시가 설치되지 않았더라도).
<!doctype html>
<html>
<head>
<title>Audio test</title>
<script>
/**
* Plays a sound using the HTML5 audio tag. Provide mp3 and ogg files for best browser support.
* @param {string} filename The name of the file. Omit the ending!
*/
function playSound(filename){
var mp3Source = '<source src="' + filename + '.mp3" type="audio/mpeg">';
var oggSource = '<source src="' + filename + '.ogg" type="audio/ogg">';
var embedSource = '<embed hidden="true" autostart="true" loop="false" src="' + filename +'.mp3">';
document.getElementById("sound").innerHTML='<audio autoplay="autoplay">' + mp3Source + oggSource + embedSource + '</audio>';
}
</script>
</head>
<body>
<!-- Will try to play bing.mp3 or bing.ogg (depends on browser compatibility) -->
<button onclick="playSound('bing');">Play</button>
<div id="sound"></div>
</body>
</html>
브라우저 지원
사용 된 코드
- Chrome, Safari 및 Internet Explorer 용 MP3.
- Firefox 및 Opera 용 OGG.
답변
2016 년부터는 다음으로 충분합니다 (삽입 할 필요도 없음).
let src = 'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3';
let audio = new Audio(src);
audio.play();
답변
웹 사이트에서 알림 소리를 재생하는 플러그인 하나 더 : Ion.Sound
장점 :
- HTML5 오디오로 대체되는 Web Audio API 기반 사운드 재생을위한 JavaScript 플러그인.
- 플러그인은 가장 널리 사용되는 데스크톱 및 모바일 브라우저에서 작동하며 일반적인 웹 사이트에서 브라우저 게임에 이르기까지 모든 곳에서 사용할 수 있습니다.
- 오디오 스프라이트 지원이 포함되어 있습니다.
- 종속성이 없습니다 (jQuery가 필요하지 않음).
- 25 가지 무료 사운드가 포함되어 있습니다.
플러그인 설정 :
// set up config
ion.sound({
sounds: [
{
name: "my_cool_sound"
},
{
name: "notify_sound",
volume: 0.2
},
{
name: "alert_sound",
volume: 0.3,
preload: false
}
],
volume: 0.5,
path: "sounds/",
preload: true
});
// And play sound!
ion.sound.play("my_cool_sound");
답변
야후의 미디어 플레이어는 어때 야후의 라이브러리를 삽입하세요
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
그리고 그것을 다음과 같이 사용하십시오.
<a id="beep" href="song.mp3">Play Song</a>
자동 시작하려면
$(function() { $("#beep").click(); });
답변
크로스 브라우저 호환 알림 재생
이 게시물의 @Tim Tisdall 이 조언 한대로 Howler.js 플러그인을 확인하십시오 .
크롬과 같은 브라우저 javascript
는 성능 향상을 위해 최소화되거나 비활성 상태 일 때 실행을 비활성화합니다 . 그러나 이것은 브라우저가 비활성 상태이거나 사용자가 최소화 한 경우에도 알림 음을 재생합니다.
var sound =new Howl({
src: ['../sounds/rings.mp3','../sounds/rings.wav','../sounds/rings.ogg',
'../sounds/rings.aiff'],
autoplay: true,
loop: true
});
sound.play();
희망은 누군가를 돕습니다.
답변
flash로 대체 되는 태그 의 polyfill 인 audio.js 를 사용하세요 <audio>
.
에서 일반적으로 찾는 https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills HTML로 polyfills 5 API를 … ( 더 포함 <audio>
polyfills를 )
답변
코드에서 이벤트를 호출하려는 경우 가장 좋은 방법은 사용자가 페이지에 없으면 브라우저가 응답하지 않기 때문에 트리거를 만드는 것입니다.
<button type="button" style="display:none" id="playSoundBtn" onclick="playSound();"></button>
이제 사운드를 재생하고 싶을 때 버튼을 트리거 할 수 있습니다.
$('#playSoundBtn').trigger('click');