Asked thg 10 14, 2020 4:42 SA 185 0 2
  • 185 0 2
0

Cách làm notification trên browser kèm sound

Share
  • 185 0 2

Mình có sử dụng Notification API để làm thông báo trên browser của client, hiện đã có notification bắn thành công nhưng mình đang muốn có thêm âm thanh báo có notify thì đang bị vướng ở đoạn này. MÌnh có thử search trên google thì có suggest là dùng Audio nhưng dùng thằng này thì khi không có tương tác với site thì nó sẽ báo lỗi. Có thể hiểu đơn giản là mình đang muốn khi đang ở tab khác hoặc đang ẩn browser xuống thì vẫn có thể nhận được sound từ notificaion, bạn nào dã làm thành công rồi thì cho mình keyword hoặc hướng làm với.

2 ANSWERS


Answered thg 10 14, 2020 5:04 SA
+1

Bạn thử làm cách này được không nhé.

  1. Khi vào trang bạn cho trình duyệt load file sound của bạn xuống.
  2. Khi bạn gọi show notify thì bạn gọi js để play luôn đoạn sound kia. audio.play()
Share
Avatar Nguyen Tuan Anh @TuanAnh9996
thg 10 14, 2020 6:40 SA

mình cũng thử nhét audio.play() vào đoạn handle của Notification rồi nhưng chỉ cần không tương tác với site thì cũng sẽ lỗi

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
0
| Reply
Share
Avatar morikun @thanhnguyen
thg 10 15, 2020 9:03 SA

@TuanAnh9996 ko tương tác là sao bạn nhỉ.
trước mình cũng dùng audio.play mà để làm chức năng play playlist music. để cả ngày nó vẫn chạy.
hay do chrome cập nhật gì đó rồi nhỉ ?

0
| Reply
Share
Avatar Nguyen Tuan Anh @TuanAnh9996
thg 10 16, 2020 7:32 SA

@thanhnguyen là khi bắt đầu sử dụng web thì user phải có 1 hành động gì đó (click chuột, scroll tại tab web của mình) trước khi chuyển qua tab mới để audio.play() có thể chạy đó bạn. Bạn xem thêm cái cái Autoplay Policy của chrome ở đây này.

0
| Reply
Share
Answered thg 10 15, 2020 5:38 SA
0

sử dụng video tag thêm muted attr sẽ bypass Autoplay Policy của chrome

<video loop muted autoplay id="videomain">
  <source src="videoname.mp4" type="video/mp4">
</video>
Share
Avatar Nguyen Tuan Anh @TuanAnh9996
thg 10 16, 2020 7:32 SA

để mình thử xem sao

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.