ajax의 결과에 따른 오디오 재생 문제 문의드립니다.
본문
현재 코드는
<audio id="audio_id">
<source src="/mid/recv_mail.wav" type="audio/wav">
</audio>
를 body 에 생성을 한 상태에서
function ajaxCall(){
$.ajax({
type: "POST",
url: "/etc/memo.asp",
cache:false,
dataType: 'json',
async: false
}).done(function (data) {
if (data.success) {
if(parseInt(data.value) > 0)
{
document.getElementById('audio_id').play();
}
};
});
setTimeout('ajaxCall()', 5000);
}
식으로 ajax에서 메모가 왔을때 소리를 나게끔 하게 만들려 합니다. 하지만 크롬에서
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first
의 에러가 떠서 소리는 안나오고 있습니다.
iframe 으로 silence.mp3 를 넣어보기도 하고 muted 도 넣어보기도 하고 했지만 안되네요
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
}
식도 적용 시켜봤는데 여전히 안되고 있습니다.
제가 잘모르는 상태에서 적용시키려 해서 그런가 잘 안되고 있습니다.
잘아시는 분들의 코드 좀 부탁드리겠습니다.
감사합니다.
답변 3
javascript를 <body 끝부분으로 옮겨 보세요.
마찬가지로 안되고 있습니다.
참고하세요.
사용자가 click하지 않은 경우 자동으로(javascript) 소리나는 것을 크롬이 막는다고 합니다.
다음과 같이 하여 테스트 해보세요
function ajaxCall(){
$.ajax({
type: "POST",
url: "/etc/memo.asp",
cache:false,
//dataType: 'json',
async: false
}).done(function (data) {
document.getElementById('audio_id').play();
/*
if (data.success) {
if(parseInt(data.value) > 0)
{
document.getElementById('audio_id').play();
}
};
*/
});
setTimeout('ajaxCall()', 5000);
}
같습니다.
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
뜨네요...
