Làm thế nào để phát âm thanh thông báo trên các trang web?

108

Khi một sự kiện nhất định xảy ra, tôi muốn trang web của mình phát một âm thanh thông báo ngắn cho người dùng.

Âm thanh không được tự động bắt đầu (ngay lập tức) khi trang web được mở. Thay vào đó, nó sẽ được phát theo yêu cầu thông qua JavaScript (khi sự kiện đó xảy ra).

Điều quan trọng là tính năng này cũng hoạt động trên các trình duyệt cũ hơn (IE6 và các trình duyệt khác).

Vì vậy, về cơ bản có hai câu hỏi:

  1. Tôi nên sử dụng codec nào?
  2. Cách tốt nhất để nhúng tệp âm thanh là gì? ( <embed>so <object>với Flash so với <audio>.)
javascript  html  audio  notifications  html5-audio 
— Timo
nguồn
Bạn có thể thử github.com/VJAI/musquito
— VJAI

Câu trả lời:

98

Giải pháp này hoạt động trên hầu hết các trình duyệt (ngay cả khi không cài đặt 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>

Hỗ trợ trình duyệt

Các mã được sử dụng

  • MP3 cho Chrome, Safari và Internet Explorer.
  • OGG cho Firefox và Opera.
— Timo
nguồn
Câu trả lời rất hay. Trong trường hợp này, mặc dù âm thanh phát ngay lập tức khi trang được mở - nhưng tôi cho rằng bạn chỉ cách thực hiện, chỉ nhằm mục đích trình diễn.
— Stefan
@Stefan Đúng vậy nhưng có thể gây nhầm lẫn. Tôi sẽ xóa điều đó khỏi câu trả lời của mình. Cảm ơn cho gợi ý.
— Timo
Cảm ơn bạn rất nhiều về giải pháp @valmar
— Jagdeep Singh
@DavidLarsson Vì có một số trình duyệt không thể đọc các codec nhất định.
— Timo
2
Tôi không thể làm cho nó hoạt động với Internet Explorer phiên bản 8.
— Md. Arafat Al Mahmud.
83

Kể từ năm 2016, những điều sau là đủ (bạn thậm chí không cần phải nhúng):

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

Xem thêm tại đây .

— Weltschmerz
nguồn
Và cũng có thể kiểm tra xem Âm thanh có được xác định hay không trước khi thực hiện việc này.
— Christophe Roussy
1
Đây là một câu trả lời tuyệt vời, rất đơn giản và hoạt động hoàn hảo.
— Polaris
3
Không hoạt động nữa, tôi nhận đượcUncaught (in promise) DOMException
— jack trống
2
Chỉ cần thử nó trên Chrome mới nhất (phiên bản 74.0.3729.169) và nó hoạt động với tôi.
— Weltschmerz
nó hoạt động chính xác trên chrome, FF và opera và là cách tiếp cận tốt hơn rất nhiều so với câu trả lời được chấp nhận vì câu trả lời đó tiếp tục gắn thẻ âm thanh vào thẻ nội dung của bạn vì tập lệnh thông báo có thể sẽ được gọi trong khoảng thời gian
— Muhammad Omer Aslam
16

Một plugin nữa, để phát âm thanh thông báo trên các trang web: Ion.Sound

Ưu điểm:

  • JavaScript-plugin để phát âm thanh dựa trên Web Audio API với dự phòng cho HTML5 Audio.
  • Plugin đang hoạt động trên hầu hết các trình duyệt máy tính để bàn và thiết bị di động phổ biến và có thể được sử dụng ở mọi nơi, từ các trang web thông thường đến các trò chơi trên trình duyệt.
  • Hỗ trợ âm thanh-sprites bao gồm.
  • Không có phụ thuộc (không bắt buộc phải có jQuery).
  • 25 âm thanh miễn phí bao gồm.

Thiết lập 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
nguồn
4

Làm thế nào về trình phát media của yahoo Chỉ cần nhúng thư viện của yahoo 

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

Và sử dụng nó như

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

Để tự khởi động lại

$(function() { $("#beep").click(); });
— Starx
nguồn
Cũng là một giải pháp hay nhưng liệu có thể ẩn liên kết đó không? Tôi nghĩ nếu bạn đặt display: nonecho nó, nó sẽ không phát âm thanh nữa. Ngoài ra, thư viện phương tiện Yahoo hiển thị một biểu tượng "phát" nhỏ bên trái liên kết ..
— Timo
@valmar: visiblity: hidden;là câu trả lời của bạn
— Starx
3

Phát thông báo tương thích với nhiều trình duyệt

Theo lời khuyên của @Tim Tisdall từ bài đăng này , hãy kiểm tra Plugin Howler.js .

Các trình duyệt như chrome vô hiệu hóa javascriptviệc thực thi khi bị thu nhỏ hoặc không hoạt động để cải thiện hiệu suất . Nhưng Điều này sẽ phát âm thanh thông báo ngay cả khi trình duyệt không hoạt động hoặc được thu nhỏ bởi người dùng.

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

               sound.play();

Hy vọng sẽ giúp ai đó.

— shaijut
nguồn
Làm cách nào để "Thông báo này phát âm thanh ngay cả khi trình duyệt không hoạt động hoặc bị thu nhỏ"? Âm thanh có thể phát nếu được gọi khi trang ở chế độ ngủ, nhưng làm thế nào để mã lệnh gọi sound.play()chạy ngay từ đầu? Howler có đặt tất cả setTimeouts của bạn trong một trình bao bọc không?
— cao nhất
@poshest, tôi không biết nó chơi như thế nào, có thể đang kiểm tra mã nguồn hoặc liên hệ với tác giả của plugin có thể giúp bạn.
— shaijut
1
Được rồi cảm ơn. Chỉ là bạn đã đề cập đến tính năng này và liên kết câu trả lời Stackoverflow khác, nhưng nó không được đề cập như một tính năng trong tài liệu Howler , vì vậy tôi nghĩ bạn biết điều gì đó đặc biệt về nó.
— cao nhất
2

nếu bạn muốn gọi sự kiện trên mã Cách tốt nhất để làm điều đó là tạo trình kích hoạt vì trình duyệt sẽ không phản hồi nếu người dùng không ở trên trang

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

bây giờ bạn có thể kích hoạt nút của mình khi bạn muốn phát âm thanh 

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

mã này là từ talkerscode Để có hướng dẫn đầy đủ, hãy truy cập http://talkerscode.com/webtricks/play-sound-on-notification-using-javascript-and-php.php

— ramancha
nguồn
0

Chúng ta chỉ có thể sử dụng Audio và một đối tượng cùng nhau như:

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

và thậm chí thêm addEventListenercho playvàended

— Mostafa
nguồn
0

Tôi đã viết một phương pháp chức năng rõ ràng để phát âm thanh:

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
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.