웹 사이트에서 알림 음을 재생하는 방법은 무엇입니까?

108

특정 이벤트가 발생하면 웹 사이트에서 사용자에게 짧은 알림 음을 재생하고 싶습니다.

웹 사이트가 열릴 때 소리가 (즉시) 자동 시작 되지 않아야합니다 . 대신 JavaScript를 통해 요청시 재생되어야합니다 (특정 이벤트가 발생할 때).

이전 브라우저 (IE6 등)에서도 작동하는 것이 중요합니다.

따라서 기본적으로 두 가지 질문이 있습니다.

  1. 어떤 코덱을 사용해야합니까?
  2. 오디오 파일을 포함하는 가장 좋은 방법은 무엇입니까? ( <embed>vs. <object>vs. 플래시 vs. <audio>)
javascript  html  audio  notifications  html5-audio 
— 티모
소스
당신이 시도 할 수 github.com/VJAI/musquito
— VJAI

답변:

98

이 솔루션은 거의 모든 브라우저에서 작동합니다 (플래시가 설치되지 않았더라도).

<!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.
— 티모
소스
좋은 대답입니다. 이 경우 페이지가 열리면 사운드가 즉시 재생되지만 데모 목적으로 방법을 보여 주겠다고 가정합니다.
— Stefan
@Stefan 맞지만 혼란 스러울 수 있습니다. 내 대답에서 제거하겠습니다. 힌트 주셔서 감사합니다.
— Timo
솔루션 @valmar에 대해 정말 감사
— JAGDEEP 싱에게
@DavidLarsson 특정 코덱을 읽을 수없는 브라우저가 있기 때문입니다.
— Timo
2
나는 나의 Internet Explorer 버전으로 그것을 작동하게하는 데 실패 (8)
— . 메릴랜드 아라파트 알 마흐무드
83

2016 년부터는 다음으로 충분합니다 (삽입 할 필요도 없음).

let src = 'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3';
let audio = new Audio(src);
audio.play();

여기에서 더 많은 것을 보십시오 .

— Weltschmerz
소스
또한이 작업을 수행하기 전에 오디오가 정의되어 있는지 확인할 수도 있습니다.
— Christophe Roussy
1
이것은 매우 간단하고 완벽하게 작동하는 훌륭한 대답입니다.
— Polaris
3
더 이상 작동하지 않아요Uncaught (in promise) DOMException
— jack blank
2
최신 Chrome (버전 74.0.3729.169)에서 시도해 보았고 저에게 효과적입니다.
— weltschmerz
크롬, FF 및 오페라에서 올바르게 작동하며 알림 스크립트가 대부분 간격으로 호출 될 것이므로 답변이 본문 태그에 오디오 태그를 계속 추가하므로 허용 된 답변보다 훨씬 더 나은 접근 방식입니다
— Muhammad Omer Aslam
16

웹 사이트에서 알림 소리를 재생하는 플러그인 하나 더 : 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");
— 카시오 랜딤
소스
4

야후의 미디어 플레이어는 어때 야후의 라이브러리를 삽입하세요 

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

그리고 그것을 다음과 같이 사용하십시오.

<a id="beep" href="song.mp3">Play Song</a>

자동 시작하려면

$(function() { $("#beep").click(); });
— Starx
소스
또한 좋은 해결책이지만 그 링크를 숨길 수 있습니까? 설정하면 display: none더 이상 소리가 나지 않을 것 같아요 . 또한, 야후 미디어 라이브러리 쇼는 작은 "놀이"아이콘 링크의 왼쪽 ..
— 티모
@valmar : visiblity: hidden;당신의 대답은
— Starx
3

크로스 브라우저 호환 알림 재생

이 게시물의 @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();

희망은 누군가를 돕습니다.

— Shaijut
소스
"브라우저가 비활성 상태이거나 최소화 된 경우에도 알림 소리가 재생됩니다"는 어떻게됩니까? 페이지가 절전 모드 일 때 호출되면 소리가 재생 될 수 있지만 호출하는 코드 sound.play()는 처음에 어떻게 실행됩니까? Howler는 모든 setTimeouts를 래퍼에 넣습니까?
— 호화 로울지도 모르는
@poshest, 어떻게 작동하는지 모르겠습니다. 소스 코드를 확인하거나 플러그인 작성자에게 문의하면 도움이 될 수 있습니다.
— shaijut
1
알았어 고마워. 이 기능을 언급하고 다른 Stackoverflow 답변을 연결 했기 때문에 Howler 문서 의 기능으로 언급되지 않았 으므로 특별한 것을 알고 있다고 생각했습니다.
— poshest
2

코드에서 이벤트를 호출하려는 경우 가장 좋은 방법은 사용자가 페이지에 없으면 브라우저가 응답하지 않기 때문에 트리거를 만드는 것입니다.

<button type="button" style="display:none" id="playSoundBtn" onclick="playSound();"></button>

이제 사운드를 재생하고 싶을 때 버튼을 트리거 할 수 있습니다. 

$('#playSoundBtn').trigger('click');
— 스완 에삼
소스
0 
var audio = new Audio('audio_file.mp3');

function post()
{
  var tval=document.getElementById("mess").value;   
  var inhtml=document.getElementById("chat_div");
  inhtml.innerHTML=inhtml.innerHTML+"<p class='me'>Me:-"+tval+"</p>";
  inhtml.innerHTML=inhtml.innerHTML+"<p class='demo'>Demo:-Hi! how are you</p>";
  audio.play();
}

이 코드는 talkerscode에서 가져온 것입니다. 전체 자습서는 http://talkerscode.com/webtricks/play-sound-on-notification-using-javascript-and-php.php를 방문하십시오.

— 라만차
소스
0

다음과 같이 오디오와 객체를 함께 사용할 수 있습니다.

var audio = {};
audio['ubuntu'] = new Audio();
audio['ubuntu'].src="start.ogg";
audio['ubuntu'].play();

심지어 추가 addEventListener에 대한 play과ended

— Mostafa
소스
0

나는 소리를 재생하는 깔끔하고 기능적인 방법을 썼다.

sounds = {
    test : new Audio('/assets/sounds/test.mp3')
};

sound_volume = 0.1;

function playSound(sound) {
    sounds[sound].volume = sound_volume;
    sounds[sound].play();
}
function stopSound(sound) {
    sounds[sound].pause();
}
function setVolume(sound, volume) {
    sounds[sound].volume = volume;
    sound_volume = volume;
}
— 잭
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.