Hướng dẫn javascript play notification sound - javascript phát âm thanh thông báo

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 nên tự động bắt đầu (ngay lập tức) khi trang web được mở. Thay vào đó, nó nên được chơi theo yêu cầu thông qua JavaScript (khi sự kiện đó xảy ra).not auto-start (instantly) when the website is opened. Instead, it should be played on demand via JavaScript (when that certain event occurs).

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

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. Thực hành tốt nhất để nhúng tệp âm thanh là gì? (
      
    
    7 so với
      
    
    8 so với Flash so với
      
    
    9)

Hướng dẫn javascript play notification sound - javascript phát âm thanh thông báo

Hỏi ngày 11 tháng 4 năm 2012 lúc 11:32Apr 11, 2012 at 11:32

Hướng dẫn javascript play notification sound - javascript phát âm thanh thông báo

Timo Ernsttimo ErnstTimo Ernst

14.7K23 Huy hiệu vàng100 Huy hiệu bạc162 Huy hiệu Đồng23 gold badges100 silver badges162 bronze badges

2

Giải pháp 2021

function playSound(url) {
  const audio = new Audio(url);
  audio.play();
}
  

Hỗ trợ trình duyệt

Edge 12+, Firefox 20+, Internet Explorer 9+, Opera 15+, Safari 4+, Chrome

Hỗ trợ Codecs

Chỉ cần sử dụng mp3


Giải pháp cũ

(cho các trình duyệt di sản)

function playSound(filename){
  var mp3Source = '';
  var oggSource = '';
  var embedSource = '';
  document.getElementById("sound").innerHTML='';
}
  

Hỗ trợ trình duyệt

  • Edge 12+, Firefox 20+, Internet Explorer 9+, Opera 15+, Safari 4+, Chrome
  • Hỗ trợ Codecs

Chỉ cần sử dụng mp3

  • Giải pháp cũ
  • (cho các trình duyệt di sản)

  
9 (trình duyệt hiện đại)Apr 11, 2012 at 13:56

Hướng dẫn javascript play notification sound - javascript phát âm thanh thông báo

Timo Ernsttimo ErnstTimo Ernst

14.7K23 Huy hiệu vàng100 Huy hiệu bạc162 Huy hiệu Đồng23 gold badges100 silver badges162 bronze badges

13

Giải pháp 2021

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

Hỗ trợ trình duyệt

Edge 12+, Firefox 20+, Internet Explorer 9+, Opera 15+, Safari 4+, ChromeSep 2, 2016 at 6:50

Hướng dẫn javascript play notification sound - javascript phát âm thanh thông báo

Hỗ trợ CodecsDennis Hackethal

Chỉ cần sử dụng mp312 gold badges61 silver badges112 bronze badges

7

Giải pháp cũIon.Sound

  • (cho các trình duyệt di sản)
  •   
    
    9 (trình duyệt hiện đại)
  • ________ 21> (dự phòng)

Advantages:

  • Mã được sử dụng
  • MP3 cho Chrome, Safari và Internet Explorer.
  • OGG cho Firefox và Opera.
  • Đã trả lời ngày 11 tháng 4 năm 2012 lúc 13:56
  • Tính đến năm 2016, những điều sau đây sẽ đủ (bạn thậm chí không cần phải nhúng):

Xem thêm ở đây.

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

Đã trả lời ngày 2 tháng 9 năm 2016 lúc 6:50

Dennis Hackethaldennis Hackethal5 silver badges15 bronze badges

13.2K12 Huy hiệu vàng61 Huy hiệu bạc112 Huy hiệu đồngJun 16, 2014 at 23:59

2

Thêm một plugin, để phát âm thanh thông báo trên các trang web: ion.sound

 

Bản demo cơ bản

Play Song

Bản demo nâng cao

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

Trang Ion.Sound GitHubApr 11, 2012 at 15:49

JavaScript-plugin để phát âm thanh dựa trên API âm thanh web với dự phòng với âm thanh HTML5.Starx

Plugin đang làm việc trên hầu hết các trình duyệt máy tính để bàn và di động phổ biến và có thể được sử dụng ở mọi nơi, từ các trang web phổ biến đến các trò chơi trình duyệt.45 gold badges181 silver badges259 bronze badges

2

Hỗ trợ âm thanh bao gồm.

Không phụ thuộc (không cần thiết).

25 âm thanh miễn phí bao gồm.

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

               sound.play();

Thiết lập plugin:

IondenJul 25, 2016 at 15:20

Hướng dẫn javascript play notification sound - javascript phát âm thanh thông báo

7635 Huy hiệu bạc15 Huy hiệu ĐồngShaiju T

Đã trả lời ngày 16 tháng 6 năm 2014 lúc 23:5918 gold badges102 silver badges188 bronze badges

3

Làm thế nào về trình phát truyền thông của Yahoo vừa nhúng thư viện của Yahoo

  
0

Và sử dụng nó như

  
1

Để tự động hóaDec 22, 2019 at 11:09

Hướng dẫn javascript play notification sound - javascript phát âm thanh thông báo

Đã trả lời ngày 11 tháng 4 năm 2012 lúc 15:49

STARXSTARX

  
2

76.1K45 Huy hiệu vàng181 Huy hiệu bạc259 Huy hiệu đồng

  
3

Phát thông báo tương thích trình duyệt chéo

Theo lời khuyên của @tim Tisdall từ bài đăng này, hãy kiểm tra plugin howler.js.Oct 24, 2020 at 8:43

Hướng dẫn javascript play notification sound - javascript phát âm thanh thông báo

  
4

Các trình duyệt như Chrome vô hiệu hóa thực thi

function playSound(filename){
  var mp3Source = '';
  var oggSource = '';
  var embedSource = '';
  document.getElementById("sound").innerHTML='';
}
2 khi giảm thiểu hoặc không hoạt động để cải thiện hiệu suất. Nhưng điều này phát thông báo âm thanh ngay cả khi trình duyệt không hoạt động hoặc giảm thiểu bởi người dùng.

Hy vọng sẽ giúp ai đó.Feb 25, 2016 at 11:17

Đã trả lời ngày 25 tháng 7 năm 2016 lúc 15:20

  
5

Shaiju Tshaiju t

5.99118 Huy hiệu vàng102 Huy hiệu bạc188 Huy hiệu đồngJul 17, 2018 at 3:33

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 trả lời nếu người dùng không có trên trangMostafa

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 thanh1 gold badge12 silver badges21 bronze badges

Đã trả lời ngày 22 tháng 12 năm 2019 lúc 11:09

  
6

Nếu bạn muốn tự động hóa quy trình thông qua

function playSound(filename){
  var mp3Source = '';
  var oggSource = '';
  var embedSource = '';
  document.getElementById("sound").innerHTML='';
}
3:Dec 31, 2018 at 12:17

Hướng dẫn javascript play notification sound - javascript phát âm thanh thông báo

Bao gồm một nơi nào đó trong

function playSound(filename){
  var mp3Source = '';
  var oggSource = '';
  var embedSource = '';
  document.getElementById("sound").innerHTML='';
}
4:Jack

và ẩn nó qua

function playSound(filename){
  var mp3Source = '';
  var oggSource = '';
  var embedSource = '';
  document.getElementById("sound").innerHTML='';
}
5:10 gold badges47 silver badges57 bronze badges