Làm cách nào để tự động phát âm thanh trong JavaScript?

Nếu bạn đang xây dựng một trang web và đã từng thắc mắc về cách tự động phát nhạc, thì bài viết này là dành cho bạn

Tuy nhiên, mặc dù có một số lý do chính đáng để tự động phát âm thanh khi ai đó truy cập một trang, nhưng tại thời điểm viết bài này, nó được coi là một trải nghiệm UX (trải nghiệm người dùng) tồi. Chắc chắn là như vậy nếu không có bất kỳ loại tương tác nào của người dùng như nhấp chuột hoặc nhấn nút trước hoặc bạn cố tình ẩn các điều khiển của trình phát

Nhưng có thể bạn đang xây dựng trò chơi và muốn âm thanh phát tự động khi tải trang. Dù lý do là gì, hãy đọc tiếp để xem một số giải pháp khả thi

thực hiện đơn giản

Đầu tiên, thêm phần tử audio vào trang và tải nguồn âm thanh bằng thuộc tính src

Tiếp theo, sử dụng JavaScript để lắng nghe sự kiện DOMContentLoaded, chọn sự kiện audio và gọi audio.play()

window.addEventListener("DOMContentLoaded", event => {
  const audio = document.querySelector("audio");
  audio.volume = 0.2;
  audio.play();
});

Một lần nữa, đây được coi là một trải nghiệm UX tồi tệ và đã bị chặn trong Chrome cho đến khi cập nhật gần đây. Vì phương pháp này chiếm quyền kiểm soát khỏi tay người dùng của bạn nên nó vẫn có thể bị chặn trong Firefox

Ngoài ra, mặc dù có một thuộc tính autoplay cho phần tử audio, nhưng thuộc tính này không được khuyến nghị và có thể bị chặn trong tất cả các trình duyệt chính tùy thuộc vào cách nó được sử dụng

Triển khai tốt hơn

Cách dễ nhất để cải thiện UX và giảm khả năng làm phiền khách truy cập vào trang web của bạn là chỉ phát âm thanh sau khi người dùng tương tác với trang

Ví dụ: bạn có thể thêm tắt tiếng/bật tiếng đơn giản bắt đầu ở trạng thái tắt tiếng và chỉ phát nhạc khi được nhấp vào

hình ảnh-77 phút1415×866 439 KB

const button = document.querySelector("#button");
const icon = document.querySelector("#button > i");
const audio = document.querySelector("audio");

button.addEventListener("click", () => {
  if (audio.paused) {
    audio.volume = 0.2;
    audio.play();
    icon.classList.remove('fa-volume-up');
    icon.classList.add('fa-volume-mute');
    
  } else {
    audio.pause();
    icon.classList.remove('fa-volume-mute');
    icon.classList.add('fa-volume-up');
  }
  button.classList.add("fade");
});

Các phần quan trọng nhất là các phương pháp audio.play() và

window.addEventListener("DOMContentLoaded", event => {
  const audio = document.querySelector("audio");
  audio.volume = 0.2;
  audio.play();
});

Hãy xem ví dụ trực tiếp này về một trang có nút tắt tiếng/bật tiếng

Tóm tắt

Có một vài lý do chính đáng để tạo một trang tự động phát nhạc khi tải, nhưng nó vẫn được nhiều người coi là cách làm không tốt. Nếu bạn cần phát âm thanh, bạn nên có các điều khiển, ngay cả khi đó chỉ là một nút tắt tiếng/bật tiếng đơn giản

Hoặc bạn có thể sáng tạo – nếu bạn đang xây dựng một trò chơi, bạn nghĩ sao về việc thêm màn hình bắt đầu khi người dùng phải nhấp vào nút để bắt đầu chơi?

Dù bạn chọn tuyến đường nào, hãy nhớ ghi nhớ trải nghiệm người dùng khi bạn đi. Giữ mã hóa an toàn và hạnh phúc

Ghi chú. Xin chân thành cảm ơn lasjorg đã chia sẻ mã và tạo trang ví dụ được sử dụng trong bài viết này. Bạn có thể tìm thấy bản gốc trong các ý kiến ​​​​dưới đây

Xin chào nhà phát triển, hôm nay tôi sẽ hướng dẫn bạn cách phát âm thanh sau khi tải trang bằng JavaScript. Trong nhiều trường hợp, chúng tôi thấy rằng chúng tôi chỉ cần phát tệp âm thanh sau khi trang web được tải. Bởi vì hầu hết thời gian, chúng tôi không muốn phát tệp âm thanh trước khi trang web được tải

Cập nhật. Trong các bản cập nhật gần đây của Chrome, bạn có thể gặp khó khăn khi tự động phát vì bạn sẽ cần sử dụng

muted="muted".

Bạn có thể gặp lỗi như thế này. Uncaught (trong lời hứa) DOMException. play() không thành công vì người dùng không tương tác với tài liệu trước

Google chrome rất nghiêm ngặt để bảo vệ tự động phát tiếng ồn trên trang web

Mã nguồn trình phát nhạc dính dưới cùng trong JavaScript và CSS

Bạn cũng nên tìm hiểu Cách phát âm thanh sau vài giây hoặc độ trễ trong JavaScript

Phát video hướng dẫn này để tìm hiểu thêm

Phát âm thanh sau khi tải trang bằng JavaScript

Lưu ý rằng. Đối với bản cập nhật gần đây của chrome và một số trình duyệt khác, bạn nên thử điều này

Điều hướng đến Cài đặt Google Chrome, Quyền tìm kiếm và cấp quyền âm thanh,

Bạn cũng có thể thêm liên kết trang của mình vào phần cho phép

(Mayuresh Deshmukh đã bình luận về bài đăng này)

Vì vậy, trước khi trực tiếp chỉ cho bạn điều đó, tôi muốn chỉ cho bạn cách phát tệp âm thanh trong HTML

Vì vậy, trước tiên chúng ta cần xóa thuộc tính tự động phát. Sau đó, chúng tôi sẽ thêm chức năng JavaScript của mình để phát âm thanh khi tải trang

Vì vậy, mã đầy đủ của chúng tôi sẽ trông như thế này

window.onload

sẽ chạy chức năng này sau khi tải trang

 document.getElementById("my_audio").play();

đây tài liệu. Phương thức getElementById() chịu trách nhiệm lấy tệp âm thanh theo id của nó

Sau đó, phương thức play() được sử dụng để phát tệp âm thanh

Cũng đọc,

Cách nhận tùy chọn đã chọn từ danh sách thả xuống biểu mẫu HTML trong jQuery

Trình phát video/âm thanh HTML5 Điều khiển âm lượng bằng phím trong JavaScript

Đặc biệt lưu ý. Thẻ âm thanh được sử dụng trong thẻ body chứ không phải trong thẻ head, vì nếu bạn chèn nó vào thẻ head trình duyệt sẽ tự động tải dữ liệu media trong phần body. Bạn có thể sử dụng tùy chọn kiểm tra của trình duyệt để xem điều gì sẽ xảy ra nếu bạn đặt thẻ âm thanh vào thẻ đầu

Vì vậy, tốt hơn hết là đặt thẻ âm thanh trong thẻ body

Sử dụng chức năng JavaScript này, bạn có thể dễ dàng phát tệp âm thanh sau khi tải trang

Vui lòng viết trong phần nhận xét và xem video được nhúng trên trang này để tìm hiểu cách đặt thời gian trễ để phát tệp âm thanh của bạn trên trang web

33 phản hồi cho “Cách phát âm thanh sau khi tải trang bằng HTML bằng JavaScript”

1. Deepak Patil nói.

   Tôi đã thử cái này nhưng nó không hoạt động trong google chrome

   • Saruque Ahamed Mollick nói.

     Bạn có thể cho tôi xem mã đầy đủ của bạn để tôi có thể giải quyết vấn đề của bạn không?
     Bởi vì mã này đã được thử nghiệm trên chrome và cho đến nay nó vẫn hoạt động tốt để phát âm thanh sau khi tải trang bằng JavaScript

2. Phanxicô nói.

   Xin chào,
   Tôi cũng có cùng một vấn đề. Nó không hoạt động trên phiên bản chrome 73 của tôi. 0. 3683. 86

   Tôi đã sao chép mã chính xác và chỉ thay thế tên tệp âm thanh ở cùng vị trí của tệp html này. Tự hỏi tại sao…

   Cảm ơn bạn đã giúp đỡ

   • Saruque Ahamed Mollick nói.

     Tôi đã kiểm tra mã ngay bây giờ, tôi cũng đang sử dụng cùng một phiên bản chrome
     Vui lòng kiểm tra lại đường dẫn tệp nguồn mp3 của bạn

3. Saruque Ahamed Mollick nói.

   Nhưng trang chỉ phát âm thanh lần đầu tiên, Nếu bạn tải lại, nó sẽ không hoạt động. Tôi đoán đây chỉ là lỗi với google chrome. Chúng tôi hy vọng bản cập nhật mới sẽ khắc phục sự cố

4. Pramod nói.

   nó không hoạt động trong trình duyệt chrome android ????

   • Saruque Ahamed Mollick nói.

     Rất tiếc phải thông báo cho bạn nhưng đây là sự cố kỹ thuật của trình duyệt chrome. Một khi chúng tôi sẽ có một cách khác, chúng tôi sẽ cập nhật tại đây

5. Amirul Asri nói.

   Trước tiên hãy thử trên google chrome, nó hoạt động. Sau khi làm mới lại trang. Âm thanh không phát

   • Saruque Ahamed Mollick nói.

     tôi đang phải đối mặt với vấn đề tương tự. Tôi nghĩ đó là một lỗi của Chrome

6. Nhà phát triển nói.

   Nó cũng không hoạt động trong Firefox

   • Saruque Ahamed Mollick nói.

     Bạn có nhận được bất kỳ loại lỗi? . Không biết họ có thực hiện bất kỳ cập nhật lớn nào hay không

7. Cikal nói.

   Không cần ghi đè cuộc gọi >> elem. chơi()
   chỉ cần đặt phần tử âm thanh như thế này và mọi thứ đều hoạt động tốt (Đã được tôi kiểm tra) trên Chrome, FireFox, IE-11

8. Cikal nói.

   Không cần ghi đè cuộc gọi. yếu tố. chơi()
   chỉ cần đặt phần tử âm thanh như thế này và mọi thứ đều hoạt động tốt (Đã được tôi kiểm tra) trên Chrome, FireFox, IE-11

   trang web này cần mã được nhúng để nhận xét, ít nhất là hình ảnh để chụp chia sẻ với khách truy cập khác. đề xuất Disqus cho phần này. 🙂

9. Omar nói.

   nó hoạt động trong firefox nhưng không hoạt động trong chrome

10. Mayuresh Deshmukh nói.

    Điều hướng đến Cài đặt Google Chrome, Quyền tìm kiếm và cấp quyền âm thanh,

    Bạn cũng có thể thêm liên kết trang của mình vào phần cho phép

11. Bob Gross nói.

    Tôi không thấy cài đặt Âm thanh cho Google Chrome Phiên bản 78. 0. 3904. 108 (Bản dựng chính thức) (64-bit). Mã chỉ hoạt động trong Firefox, IE và MS Edge. Bất kỳ đề xuất?

    • Saruque Ahamed Mollick nói.

      Vui lòng kiểm tra cài đặt âm thanh trong cài đặt trang web

12. Bob Gross nói.

    Được rồi, tôi đã khắc phục sự cố Âm thanh trong Google Chrome. “Loa / HP” trong HP Beats Audio được đặt thành 0%. Mã hiện hoạt động trong các trình duyệt, Google Chrome, Firefox, IE và MS Edge

    • Saruque Ahamed Mollick nói.

      Chúng tôi rất vui vì nó đang hoạt động tốt

13. varun nói.

    Cảm ơn anh trai, mã của bạn đang hoạt động 100%

14. Natig nói.

    Chào Ahmed. Mã của bạn hoạt động rất tốt. Tôi có thể viết mã để phát âm thanh vào một thời điểm cụ thể không? . (27/04/2020 15. 20) chỉ chơi một lần. Cái này dành cho azan

    • Saruque Ahamed Mollick nói.

      Chỉ cần phát hiện thời gian hiện tại bằng JavaScript và so sánh nó với 27 Tháng Tư, 2020 15. 20. Nếu chúng giống nhau, bạn có thể chạy chức năng phát âm thanh

15. Shruti nói.

    Nó không hoạt động đối với tôi, tôi gặp lỗi này “Uncaught (in Promise) DOMException. play() không thành công vì người dùng không tương tác với tài liệu trước. ”
    bất cứ ai có thể giúp tôi cho cùng

    • Saruque Ahamed Mollick nói.

      Đó là do trình duyệt cập nhật. Nó sẽ hoạt động tốt nếu bạn sử dụng cái này. tắt tiếng = "tắt tiếng"

      • shruti nói.

        Tôi không thể làm điều đó trong chrome, nhưng tôi có thể làm điều đó trong Mozilla

16. nilesh nói.

    Trước tiên hãy thử trên google chrome, nó hoạt động. Sau khi làm mới lại trang. Âm thanh không phát

17. James nói.

    Tôi đã thử mã đầy đủ của bạn
    Nhưng kết quả không hiển thị gì và tôi gặp lỗi này trong bảng điều khiển
    “Uncaught (trong lời hứa) DOMException. play() không thành công vì người dùng không tương tác với tài liệu trước. ”

    Vui lòng giúp tôi khắc phục điều này

18. Dragnev nói.

    Cảm ơn rất nhiều. Nó hoạt động nhưng làm thế nào để nó chỉ phát 1 lần và không lặp lại?

19. John nói.

    nó không hiệu quả với tôi, mệt mỏi rồi nhưng không có gì xảy ra

20. Ankita Daw nói.

    Nó không làm việc. Nó không hiển thị gì cả

    Bạn có thể vui lòng giúp tôi khắc phục điều này?

21. Jayshree Mohapatra nói.

    Âm thanh của tôi không phát khi chúng tôi tải trang web. Xin hay trả lơi tôi

22. Muhammad Tariq Khan nói.

    Theo chính sách web mới của google chrome và mozilla firefox, AudioContext bị treo cho đến khi người dùng tương tác. Vì vậy, giải pháp này không còn giá trị

    Làm cách nào để tự động phát âm thanh bằng JavaScript?

    Thuộc tính tự động phát âm thanh .

    Tìm hiểu xem âm thanh có bắt đầu phát ngay khi sẵn sàng không. getElementById("myAudio"). tự chạy;

    Bật tự động phát và tải lại video. var x = tài liệu. getElementById("myAudio"); . .

    A demonstration of how to create a

    Bạn có thể phát âm thanh bằng JavaScript không?

    Bạn có thể sử dụng Web Audio API để phát âm thanh . Có khá nhiều thư viện âm thanh như tiếng hú. js, soundjs, v.v. Nếu bạn không lo lắng về các trình duyệt cũ thì bạn cũng có thể kiểm tra http. //musquitojs. com/.

    Làm cách nào để tự động phát video với HTML âm thanh?

    Thuộc tính tự động phát DOM Âm thanh/Video HTML .

    Định nghĩa và cách sử dụng. Thuộc tính tự động phát đặt hoặc trả về việc âm thanh/video có bắt đầu phát ngay khi được tải hay không

    Hỗ trợ trình duyệt. Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính. .

    cú pháp. Trả lại thuộc tính tự động phát

    Làm cách nào để tự động phát âm thanh trong HTML mà không cần điều khiển?

    Thẻ âm thanh cho phép bạn nhúng nội dung âm thanh vào các trang HTML của mình. Theo mặc định, trình duyệt không hiển thị bất kỳ điều khiển nào cho thành phần này . Điều đó có nghĩa là âm thanh sẽ chỉ phát nếu được đặt thành tự động phát (thêm về điều này sau) và người dùng không thể xem cách dừng âm thanh hoặc điều khiển âm lượng hoặc di chuyển qua bản nhạc.