Bagaimana cara memutar suara notifikasi di situs web?

108

Saat peristiwa tertentu terjadi, saya ingin situs web saya memutar suara pemberitahuan singkat kepada pengguna.

Suara seharusnya tidak otomatis mulai (langsung) saat situs web dibuka. Sebaliknya, itu harus dimainkan sesuai permintaan melalui JavaScript (ketika peristiwa tertentu terjadi).

Penting bahwa ini juga berfungsi di browser lama (IE6 dan semacamnya).

Jadi, pada dasarnya ada dua pertanyaan:

  1. Codec apa yang harus saya gunakan?
  2. Apa praktik terbaik untuk menyematkan file audio? ( <embed>vs. <object>vs. Flash vs. <audio>)
javascript html audio notifications html5-audio Timo
sumber
Anda dapat mencoba github.com/VJAI/musquito
VJAI

Jawaban:

98

Solusi ini berfungsi di hampir semua browser (bahkan tanpa menginstal Flash):

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

Dukungan browser

Kode digunakan

  • MP3 untuk Chrome, Safari dan Internet Explorer.
  • OGG untuk Firefox dan Opera.
Timo
sumber
Jawaban bagus. Dalam hal ini meskipun suara langsung diputar saat halaman dibuka - tetapi saya berasumsi Anda menunjukkan caranya, hanya untuk tujuan demonstrasi.
Stefan
@ Stefan Itu benar, tetapi mungkin membingungkan. Saya akan menghapus itu dari jawaban saya. Terima kasih atas petunjuknya.
Timo
Terima kasih banyak atas solusinya @valmar
Jagdeep Singh
@DavidLarsson Karena ada beberapa browser yang tidak dapat membaca codec tertentu.
Timo
2
Saya gagal membuatnya berfungsi dengan Internet Explorer versi 8.
Md. Arafat Al Mahmud
83

Mulai 2016, berikut ini sudah cukup (Anda bahkan tidak perlu menyematkan):

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

Lihat selengkapnya di sini .

weltschmerz.dll
sumber
Dan mungkin juga memeriksa apakah Audio ditentukan sebelum melakukan ini.
Christophe Roussy
1
Ini adalah jawaban yang bagus, sangat sederhana dan bekerja dengan sempurna.
Polaris
3
Tidak berfungsi lagi saya mendapatkanUncaught (in promise) DOMException
jack blank
2
Baru saja mencobanya di Chrome terbaru (versi 74.0.3729.169) dan berhasil untuk saya.
weltschmerz
ini bekerja dengan benar di chrome, FF dan opera dan merupakan pendekatan yang jauh lebih baik daripada jawaban yang diterima karena jawaban itu terus menambahkan tag audio ke tag tubuh Anda karena skrip notifikasi kemungkinan besar akan dipanggil dalam interval
Muhammad Omer Aslam
16

Satu lagi plugin, untuk memutar suara notifikasi di situs web: Ion.Sound

Keuntungan:

  • JavaScript-plugin untuk memutar suara berdasarkan API Audio Web dengan fallback ke Audio HTML5.
  • Plugin berfungsi pada browser desktop dan seluler paling populer dan dapat digunakan di mana saja, dari situs web umum hingga game browser.
  • Termasuk dukungan audio-sprite.
  • Tidak ada ketergantungan (jQuery tidak diperlukan).
  • 25 suara gratis disertakan.

Siapkan plugin:

// 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
sumber
4

Bagaimana dengan media player yahoo Sematkan saja perpustakaan yahoo 

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

Dan gunakan seperti itu

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

Untuk memulai otomatis

$(function() { $("#beep").click(); });
Starx
sumber
Juga solusi yang bagus tetapi apakah mungkin menyembunyikan tautan itu? Saya pikir jika Anda mengaturnya display: none, itu tidak akan memutar suara lagi. Selain itu, perpustakaan media Yahoo menampilkan ikon "putar" kecil di kiri tautan ..
Timo
@valmar: visiblity: hidden;adalah jawaban Anda
Starx
3

Putar notifikasi yang kompatibel lintas browser

Seperti yang disarankan oleh @Tim Tisdall dari posting ini , Periksa Plugin Howler.js .

Browser seperti chrome menonaktifkan javascripteksekusi saat diminimalkan atau tidak aktif untuk peningkatan kinerja . Tapi Ini memainkan suara pemberitahuan bahkan jika browser tidak aktif atau diminimalkan oleh pengguna.

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

               sound.play();

Harapan membantu seseorang.

shaijut
sumber
Bagaimana "Ini memainkan suara pemberitahuan bahkan jika browser tidak aktif atau diminimalkan"? Suara mungkin diputar jika dipanggil saat halaman dalam mode tidur, tetapi bagaimana kode yang sound.play()menjalankan panggilan pada awalnya? Apakah howler memasukkan semua setTimeout Anda ke dalam bungkus?
poshest
@poshest, saya tidak tahu cara memainkannya, mungkin memeriksa kode sumber atau menghubungi penulis plugin dapat membantu Anda.
shaijut
1
Ok terima kasih. Hanya saja Anda menyebutkan fitur ini dan menautkan jawaban Stackoverflow lainnya, tetapi tidak disebutkan sebagai fitur dalam dokumentasi Howler , jadi saya pikir Anda tahu sesuatu yang istimewa tentangnya.
poshest
2

jika Anda ingin memanggil acara pada kode Cara terbaik untuk melakukannya adalah dengan membuat pemicu karena browser tidak akan merespons jika pengguna tidak ada di halaman

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

sekarang Anda dapat memicu tombol Anda saat Anda ingin memutar suara 

$('#playSoundBtn').trigger('click');
Sfwan Essam
sumber
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();
}

kode ini dari talkerscode Untuk tutorial lengkap kunjungi http://talkerscode.com/webtricks/play-sound-on-notification-using-javascript-and-php.php

ramancha
sumber
0

Kami hanya dapat menggunakan Audio dan objek bersama-sama seperti:

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

dan bahkan menambahkan addEventListeneruntuk playdanended

Mostafa
sumber
0

Saya menulis metode fungsional yang bersih untuk memainkan suara:

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