Web sitelerinde bildirim sesi nasıl çalınır?

108

Belirli bir olay meydana geldiğinde, web sitemin kullanıcıya kısa bir bildirim sesi vermesini istiyorum.

Ses gerektiğini değil web sitesi açıldığında (anında) otomatik başlatın. Bunun yerine, JavaScript aracılığıyla istek üzerine oynatılmalıdır (belirli bir olay gerçekleştiğinde).

Bunun daha eski tarayıcılarda (IE6 ve benzeri) da çalışması önemlidir.

Yani temelde iki soru var:

Hangi codec bileşenini kullanmalıyım?
Ses dosyasını yerleştirmek için en iyi uygulama nedir? ( <embed>Vs <object>vs Flaş vs <audio>)

— Timo
kaynak

Github.com/VJAI/musquito

— VJAI

98

Bu çözüm hemen hemen tüm tarayıcılarda çalışır (Flash kurulu olmasa bile):

<!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>

Tarayıcı desteği

<audio> (Modern tarayıcılar)
<embed> (Geri Dönüş)

Kullanılan kodlar

Chrome, Safari ve Internet Explorer için MP3.
Firefox ve Opera için OGG.

— Timo
kaynak

Güzel cevap. Bu durumda, sayfa açıldığında ses anında çalsa da - ancak nasıl olduğunu gösterdiğinizi varsayıyorum, sadece gösteri amaçlı.

— Stefan

@Stefan Bu doğru ama kafa karıştırıcı olabilir. Bunu cevabımdan çıkaracağım. İpucu için teşekkürler.

— Timo

Çözüm için çok teşekkür ederim @valmar

— Jagdeep Singh

@DavidLarsson Çünkü bazı kodekleri okuyamayan bazı tarayıcılar var.

— Timo

2

Internet Explorer sürüm 8 ile çalışmasını sağlayamadım.

— Md. Arafat Al Mahmud

83

2016 itibariyle, aşağıdakiler yeterli olacaktır (yerleştirmenize bile gerek yoktur):

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

Daha fazlasını burada görün .

— Weltschmerz
kaynak

Bunu yapmadan önce Sesin tanımlanıp tanımlanmadığını da kontrol edebilirsiniz.

— Christophe Roussy

1

Bu harika bir cevap, çok basit ve mükemmel çalışıyor.

— Polaris

3

Artık çalışmıyorUncaught (in promise) DOMException

— jack blank

2

En son Chrome'da (74.0.3729.169 sürümü) denedim ve benim için çalışıyor.

— weltschmerz

krom, FF ve operada doğru çalışıyor ve kabul edilen cevaptan çok daha iyi bir yaklaşım çünkü bu cevap ses etiketini vücut etiketinize eklemeye devam ediyor çünkü bildirim komut dosyası büyük olasılıkla aralıklarla çağrılacak

— Muhammed Ömer Aslam

16

Web sitelerinde bildirim sesleri çalmak için bir eklenti daha: Ion.Sound

Avantajlar:

HTML5 Audio'ya dönüş ile birlikte Web Audio API tabanlı sesleri çalmak için JavaScript eklentisi.
Eklenti, en popüler masaüstü ve mobil tarayıcılarda çalışıyor ve yaygın web sitelerinden tarayıcı oyunlarına kadar her yerde kullanılabilir.
Audio-sprite desteği dahildir.
Bağımlılık yok (jQuery gerekli değildir).
25 ücretsiz ses dahildir.

Eklenti kurun:

// 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");

— Cassio Landim
kaynak

4

Yahoo'nun medya oynatıcısına ne dersin Sadece yahoo'nun kitaplığını yerleştir

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

Ve gibi kullan

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

Otomatik başlatmak için

$(function() { $("#beep").click(); });

— Starx
kaynak

Ayrıca güzel bir çözüm ama bu bağlantıyı gizlemek mümkün olabilir mi? Sanırım display: nonebuna göre ayarlarsanız , artık sesi çalmayacak. Ayrıca, Yahoo medya kitaplığı bağlantının solunda küçük bir "oynat" simgesi gösterir ..

— Timo

@valmar: visiblity: hidden;cevabınız

— Starx

3

Tarayıcılar arası uyumlu bildirimleri oynatın

Dan @Tim Tisdall tarafından tavsiye olarak bu yazı, kontrol Howler.js Plugin.

Chrome gibi tarayıcılar javascript, performans iyileştirmeleri için simge durumuna küçültüldüğünde veya etkin olmadığında yürütmeyi devre dışı bırakır . Ancak Bu, tarayıcı etkin olmasa veya kullanıcı tarafından simge durumuna küçültülmüş olsa bile bildirim sesleri çalar.

  var sound =new Howl({
                     src: ['../sounds/rings.mp3','../sounds/rings.wav','../sounds/rings.ogg',
                           '../sounds/rings.aiff'],
                     autoplay: true,
                     loop: true
                    });

               sound.play();

Umut birine yardım eder.

— Shaijut
kaynak

"Bu, tarayıcı etkin olmasa veya simge durumuna küçültülmüş olsa bile bildirim sesleri çalar" nasıl oluyor? Sayfa uykudayken çağrılırsa ses çalabilir, ancak sound.play()ilk etapta çağıran kod nasıl çalışır? Howler tüm setTimeout'larınızı bir paketleyiciye koyuyor mu?

— poshest

@poshest, nasıl oynandığını bilmiyorum, kaynak kodunu kontrol ediyor olabilir veya eklentinin yazarıyla iletişime geçmek size yardımcı olabilir.

— shaijut

1

Tamam teşekkürler. Sadece bu özellikten bahsetmiş ve diğer Stackoverflow yanıtını bağlamışsınız, ancak Howler belgelerinde bir özellik olarak bahsedilmemiştir , bu yüzden bu konuda özel bir şey bildiğinizi düşündüm.

— poshest

2

Yedek olarak yanıp sönen etiket için çoklu dolgu olan audio.js'yi kullanın <audio>.

Genel olarak, https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills for polyfills to the HTML 5 APIs bakın .. ( daha fazla <audio>polyfill içerir )

— Gabriele Petrioli
kaynak

2

Kod üzerinde olay çağırmak istiyorsanız Bunu yapmanın en iyi yolu tetik oluşturmaktır çünkü kullanıcı sayfada değilse tarayıcı yanıt vermez.

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

artık ses çalmak istediğinizde düğmenizi tetikleyebilirsiniz

$('#playSoundBtn').trigger('click');

— Sfwan Essam
kaynak

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();
}

bu kod talkerscode'dan alınmıştır Tam eğitim için http://talkerscode.com/webtricks/play-sound-on-notification-using-javascript-and-php.php adresini ziyaret edin

— Ramancha
kaynak

0

Sadece Audio ve aşağıdaki gibi bir nesneyi birlikte kullanabiliriz:

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

ve hatta ve addEventListeneriçin ekleyerekplayended

— Mostafa
kaynak

0

Sesleri çalmak için temiz ve işlevsel bir yöntem yazdım:

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;
}

— Jack
kaynak