programming html

Html nhấp vào hình ảnh để phát mp3

Trong một số trường hợp, chúng tôi không muốn hiển thị Điều khiển mặc định do Trình duyệt của chúng tôi cung cấp để hiển thị Dữ liệu của thẻ âm thanh HTML và muốn kiểm soát Dữ liệu âm thanh HTML bằng Điều khiển tùy chỉnh.
Vì vậy, nếu bạn thắc mắc về Cách phát âm thanh trong HTML bằng JavaScript, thì Hướng dẫn này là dành cho bạn.

Phương pháp phát âm thanh trong HTML bằng JavaScript

Có một số phương pháp để phát âm thanh trong HTML bằng JavaScript. Nơi chúng ta có thể gọi hàm JavaScript để phát Dữ liệu âm thanh trong Tài liệu HTML của mình.
Điều này có thể được thực hiện bằng Sự kiện nhấp chuột của JavaScript hoặc Thuộc tính onClick của HTML.

Phương pháp 1. Phát âm thanh trong HTML bằng cách sử dụng JavaScript và HTML onClick Attribute

Để phát Âm thanh HTML bằng JavaScript và Thuộc tính HTML onCLick, chúng ta cần tạo một Hàm, Hàm này sẽ chạy bằng thuộc tính HTML onClick.
Như chúng ta đã biết, sử dụng thuộc tính onClick của HTML, chúng ta có thể chạy hàm JavaScript.
Nhưng trước tiên chúng ta cần thêm một số Mã JavaScript bên trong Chức năng Phát tệp âm thanh đó.
Chúng ta phải sử dụng tài liệu JavaScript. getElementById[] và. play[] Phương pháp.
Tài liệu ở đâu. getElementById[] sẽ chọn Dữ liệu của Thẻ âm thanh [Tệp âm thanh của chúng tôi] và. play[] sẽ phát Dữ liệu thành phần đã chọn [Âm thanh trong trường hợp này].

Thí dụ. Cách phát âm thanh trong HTML bằng JavaScript

 
   
   Play Audio

Phương pháp 2. Phát âm thanh trong HTML bằng JavaScript Click Event

Nếu bạn không thích sử dụng thuộc tính HTML onClick để chạy một Hàm JavaScript, thì bạn có thể sử dụng Trình xử lý sự kiện của JavaScript để chạy một tác vụ JavaScript cụ thể trên một lần Nhấp vào nút.
addEventListener của JavaScript sẽ theo dõi bất kỳ Nhấp chuột nào vào Phần tử HTML đã chọn.
Nếu ai đó nhấp vào Phần tử HTML đã chọn [Nút thích]. Điều này sẽ phát âm thanh HTML.

 
   
   Play Audio

Phát và tạm dừng âm thanh trong HTML bằng JS

Trong 2 Ví dụ cuối cùng của chúng tôi, chúng tôi có thể phát tệp Âm thanh của mình.
Nhưng không có gì có thể ngăn âm thanh đó phát.
Vì vậy, Ví dụ này sẽ trình bày Toàn bộ quy trình Phát và Tạm dừng Âm thanh trong HTML.
{Ghi chú. Để làm cho Ví dụ này trở nên ngắn gọn, chúng tôi đang sử dụng Thuộc tính/Sự kiện onClick}
Trước tiên, chúng tôi sẽ thêm tệp Âm thanh vào bên trong Tài liệu HTML của mình bằng cách sử dụng Thẻ âm thanh của HTML.

Sau đó, chúng tôi sẽ chỉ định Đường dẫn cho tệp Âm thanh của bạn bằng Thuộc tính SRC của thẻ Âm thanh HTML.

Bây giờ chúng ta sẽ tạo hai Nút HTML và thêm Sự kiện onClick vào đó, để JavaScript có thể chạy Chức năng đã cho trên một lần nhấp vào Nút.
Phát
Tạm dừng
Ở Bước cuối cùng này. Chúng tôi sẽ tạo hai hàm JavaScript và sử dụng các Sự kiện play[] và pause[] của JavaScript mà chúng tôi có thể Phát và Tạm dừng Âm thanh HTML của mình.
function function1[]{
play[];
}
function function2[]
pause[];
}

Thí dụ. Phát và tạm dừng âm thanh trong HTML bằng JS

Play Audio Pause Audio

Click The Play Button

Phần tử HTML

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

6 được sử dụng để nhúng nội dung âm thanh vào tài liệu. Nó có thể chứa một hoặc nhiều nguồn âm thanh, được biểu diễn bằng thuộc tính

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

7 hoặc phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

8. trình duyệt sẽ chọn cái phù hợp nhất. Nó cũng có thể là đích đến cho phương tiện truyền trực tuyến, sử dụng một

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

Thử nó

Ví dụ trên cho thấy cách sử dụng đơn giản của phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

6. Theo cách tương tự với phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

2, chúng tôi bao gồm một đường dẫn đến phương tiện mà chúng tôi muốn nhúng vào bên trong thuộc tính

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

Nội dung bên trong các thẻ mở và đóng

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

4 được hiển thị dưới dạng dự phòng trong các trình duyệt không hỗ trợ phần tử

Thuộc tính

Các thuộc tính của phần tử này bao gồm các thuộc tính toàn cục

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

Một thuộc tính Boolean. nếu được chỉ định, âm thanh sẽ tự động bắt đầu phát lại ngay khi có thể làm như vậy mà không cần đợi toàn bộ tệp âm thanh tải xuống xong

Ghi chú. Các trang web tự động phát âm thanh [hoặc video có bản âm thanh] có thể gây khó chịu cho người dùng, vì vậy nên tránh khi có thể. Nếu bạn phải cung cấp chức năng tự động phát, bạn nên chọn tham gia [yêu cầu người dùng bật cụ thể chức năng này]. Tuy nhiên, điều này có thể hữu ích khi tạo các phần tử phương tiện có nguồn sẽ được đặt sau, dưới sự kiểm soát của người dùng. Xem hướng dẫn tự động phát của chúng tôi để biết thêm thông tin về cách sử dụng tự động phát đúng cách

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

Nếu có thuộc tính này, trình duyệt sẽ cung cấp các điều khiển để cho phép người dùng điều khiển phát lại âm thanh, bao gồm âm lượng, tìm kiếm và tạm dừng/tiếp tục phát lại

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

7 Thử nghiệm Phi chuẩn

Thuộc tính

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

7, khi được chỉ định, sẽ giúp trình duyệt chọn điều khiển nào sẽ hiển thị cho phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

9 bất cứ khi nào trình duyệt hiển thị bộ điều khiển của chính nó [nghĩa là khi thuộc tính

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

6 được chỉ định]

Các giá trị được phép là

 
   
   Play Audio

21,

 
   
   Play Audio

22 và

 
   
   Play Audio

 
   
   Play Audio

Thuộc tính liệt kê này cho biết có nên sử dụng CORS để tìm nạp tệp âm thanh liên quan hay không. Các tài nguyên hỗ trợ CORS có thể được sử dụng lại trong phần tử

 
   
   Play Audio

25 mà không bị nhiễm độc. Các giá trị được phép là

 
   
   Play Audio

Gửi yêu cầu nguồn gốc chéo mà không cần thông tin xác thực. Nói cách khác, nó gửi tiêu đề HTTP

 
   
   Play Audio

27 mà không có cookie, X. 509 hoặc thực hiện xác thực HTTP Basic. Nếu máy chủ không cung cấp thông tin xác thực cho trang gốc [bằng cách không đặt tiêu đề HTTP

 
   
   Play Audio

28], tài nguyên sẽ bị nhiễm độc và việc sử dụng nó bị hạn chế

 
   
   Play Audio

Gửi yêu cầu nguồn gốc chéo với thông tin xác thực. Nói cách khác, nó gửi tiêu đề HTTP

 
   
   Play Audio

27 với cookie, chứng chỉ hoặc thực hiện xác thực HTTP Basic. Nếu máy chủ không cung cấp thông tin xác thực cho trang gốc [thông qua tiêu đề HTTP

Play Audio Pause Audio

Click The Play Button

21], tài nguyên sẽ bị nhiễm độc và việc sử dụng nó bị hạn chế

Khi không có mặt, tài nguyên được tìm nạp mà không có yêu cầu CORS [i. e. mà không gửi tiêu đề HTTP

 
   
   Play Audio

27], ngăn việc sử dụng không bị nhiễm độc của nó trong các phần tử

 
   
   Play Audio

25. Nếu không hợp lệ, nó sẽ được xử lý như thể từ khóa ẩn danh đã được sử dụng. Xem thuộc tính cài đặt CORS để biết thêm thông tin

Play Audio Pause Audio

Click The Play Button

24 Thử nghiệm

Thuộc tính Boolean được sử dụng để tắt khả năng phát lại từ xa trong các thiết bị được kết nối bằng dây [HDMI, DVI, v.v. ] và công nghệ không dây [Miracast, Chromecast, DLNA, AirPlay, v.v. ]. Xem thông số kỹ thuật được đề xuất này để biết thêm thông tin

Ghi chú. Trong Safari, bạn có thể sử dụng

Play Audio Pause Audio

Click The Play Button

25 làm dự phòng

Play Audio Pause Audio

Click The Play Button

Một thuộc tính Boolean. nếu được chỉ định, trình phát âm thanh sẽ tự động quay lại từ đầu khi đến phần cuối của âm thanh

Play Audio Pause Audio

Click The Play Button

Thuộc tính Boolean cho biết liệu âm thanh ban đầu có bị tắt tiếng hay không. Giá trị mặc định của nó là

Play Audio Pause Audio

Click The Play Button

Play Audio Pause Audio

Click The Play Button

Thuộc tính liệt kê này nhằm cung cấp gợi ý cho trình duyệt về những gì tác giả cho rằng sẽ mang lại trải nghiệm tốt nhất cho người dùng. Nó có thể có một trong các giá trị sau

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

10. Cho biết âm thanh không nên được tải trước

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

11. Cho biết rằng chỉ siêu dữ liệu âm thanh [e. g. chiều dài] được tìm nạp

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

12. Cho biết có thể tải xuống toàn bộ tệp âm thanh, ngay cả khi người dùng không muốn sử dụng tệp đó

chuỗi rỗng. Một từ đồng nghĩa của giá trị

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

Giá trị mặc định khác nhau đối với mỗi trình duyệt. Thông số kỹ thuật khuyên nó nên được đặt thành

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

Ghi chú

Thuộc tính

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

5 được ưu tiên hơn

Play Audio Pause Audio

Click The Play Button

29. Nếu

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

5 được chỉ định, rõ ràng trình duyệt sẽ cần bắt đầu tải xuống âm thanh để phát lại

Thông số kỹ thuật không bắt buộc trình duyệt phải tuân theo giá trị của thuộc tính này;

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

URL của âm thanh để nhúng. Điều này tuân theo các điều khiển truy cập HTTP. Đây là tùy chọn;

Sự kiện

Tên sự kiện Được kích hoạt khi

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

90Bộ đệm đầu vào của

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

91 đã sẵn sàng để được xử lý.

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

92Trình duyệt có thể phát phương tiện, nhưng ước tính rằng không đủ dữ liệu đã được tải để phát phương tiện cho đến hết mà không phải dừng để tải thêm nội dung vào bộ đệm.

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

93Trình duyệt ước tính nó có thể phát phương tiện đến hết mà không dừng lại để lưu vào bộ đệm nội dung.

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

94Việc hiển thị của một

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

95 bị chấm dứt.

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

96Thuộc tính

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

97 đã được cập nhật.

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

98Các phương tiện đã trở nên trống rỗng; .

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

90Phát lại đã dừng vì đã đến cuối phương tiện.

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

91Khung hình đầu tiên của phương tiện đã tải xong.

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

92Siêu dữ liệu đã được tải.

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

93Phát lại đã bị tạm dừng.

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

94Phát lại đã bắt đầu.

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

95Phát lại đã sẵn sàng bắt đầu sau khi bị tạm dừng hoặc trì hoãn do thiếu dữ liệu.

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

96Tốc độ phát lại đã thay đổi.

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

97Một hoạt động tìm kiếm đã hoàn thành.

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

98Một hoạt động tìm kiếm đã bắt đầu.

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

99Tác nhân người dùng đang cố gắng tìm nạp dữ liệu phương tiện, nhưng dữ liệu bất ngờ không xuất hiện.

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

60Tải dữ liệu phương tiện đã bị treo.

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

61Thời gian được chỉ định bởi thuộc tính

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

62 đã được cập nhật.

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

63Âm lượng đã thay đổi.

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

64Phát lại đã dừng do thiếu dữ liệu tạm thời

ghi chú sử dụng

Không phải tất cả các trình duyệt đều hỗ trợ các loại tệp và codec âm thanh giống nhau;

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

Chúng tôi cung cấp hướng dẫn cụ thể và kỹ lưỡng về các loại tệp phương tiện và codec âm thanh có thể được sử dụng trong chúng. Ngoài ra còn có hướng dẫn về codec được hỗ trợ cho video

Ghi chú sử dụng khác

Nếu bạn không chỉ định thuộc tính

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

6, trình phát âm thanh sẽ không bao gồm các điều khiển mặc định của trình duyệt. Tuy nhiên, bạn có thể tạo các điều khiển tùy chỉnh của riêng mình bằng JavaScript và API

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

Để cho phép kiểm soát chính xác nội dung âm thanh của bạn,
```
const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};
```
67 kích hoạt nhiều sự kiện khác nhau. Điều này cũng cung cấp một cách để theo dõi quá trình tìm nạp của âm thanh để bạn có thể theo dõi các lỗi hoặc phát hiện khi có đủ để bắt đầu phát hoặc thao tác với nó.
Bạn cũng có thể sử dụng API âm thanh trên web để trực tiếp tạo và thao tác các luồng âm thanh từ mã JavaScript thay vì phát trực tuyến các tệp âm thanh có sẵn

Phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

6 không thể có phụ đề hoặc chú thích được liên kết với chúng giống như cách mà phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

70 có thể. Xem WebVTT và Âm thanh của Ian Devlin để biết một số thông tin hữu ích và cách giải quyết

Một nguồn thông tin chung tốt về cách sử dụng HTML

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

6 là Hướng dẫn dành cho người mới bắt đầu sử dụng nội dung âm thanh và video

Tạo kiểu với CSS

Phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

6 không có đầu ra hình ảnh nội tại của riêng nó trừ khi thuộc tính

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

6 được chỉ định, trong trường hợp đó, các điều khiển mặc định của trình duyệt được hiển thị

Các điều khiển mặc định có giá trị

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

74 là

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

75 theo mặc định và thường nên đặt giá trị thành

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

76 để cải thiện khả năng kiểm soát đối với vị trí và bố cục, trừ khi bạn muốn nó nằm trong một khối văn bản hoặc tương tự

Bạn có thể tạo kiểu cho các điều khiển mặc định bằng các thuộc tính ảnh hưởng đến khối dưới dạng một đơn vị, vì vậy, ví dụ: bạn có thể đặt cho khối đó là

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

77 và

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

78,

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

79,

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

80, v.v. Tuy nhiên, bạn không thể tạo kiểu cho các thành phần riêng lẻ bên trong trình phát âm thanh [e. g. thay đổi kích thước nút hoặc biểu tượng, thay đổi phông chữ, v.v. ] và các điều khiển khác nhau trên các trình duyệt khác nhau

Để có giao diện nhất quán trên các trình duyệt, bạn cần tạo các điều khiển tùy chỉnh;

Khái niệm cơ bản về tạo kiểu trình phát video cung cấp một số kỹ thuật tạo kiểu hữu ích — nó được viết trong ngữ cảnh của

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

70, nhưng phần lớn trong số đó có thể áp dụng như nhau cho

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

Phát hiện thêm và xóa các bản nhạc

Bạn có thể phát hiện thời điểm các bản nhạc được thêm vào và xóa khỏi phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

6 bằng cách sử dụng các sự kiện

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

85 và

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

86. Tuy nhiên, những sự kiện này không được gửi trực tiếp đến chính phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

6. Thay vào đó, chúng được gửi đến đối tượng danh sách bản nhạc trong

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

67 của phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

6 tương ứng với loại bản nhạc đã được thêm vào phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

Một

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

01 chứa tất cả các rãnh âm thanh của phần tử phương tiện. Bạn có thể thêm một người nghe cho

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

85 vào đối tượng này để được cảnh báo khi các bản âm thanh mới được thêm vào phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

Thêm một trình nghe

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

85 vào đối tượng

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

05 này để được thông báo khi các bản nhạc video được thêm vào phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

Thêm trình xử lý sự kiện

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

85 vào

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

08 này để được thông báo khi các bản nhạc văn bản mới được thêm vào phần tử

Ghi chú. Mặc dù đó là một phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

6, nhưng nó vẫn có danh sách theo dõi video và văn bản và trên thực tế có thể được sử dụng để trình bày video, mặc dù ý nghĩa giao diện người dùng có thể kỳ lạ

Ví dụ: để phát hiện khi các bản âm thanh được thêm vào hoặc xóa khỏi phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

6, bạn có thể sử dụng mã như thế này

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

Mã này theo dõi các bản âm thanh được thêm vào và xóa khỏi phần tử và gọi một chức năng giả định trên trình chỉnh sửa bản nhạc để đăng ký và xóa bản nhạc khỏi danh sách các bản nhạc có sẵn của trình chỉnh sửa

Bạn cũng có thể sử dụng

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

11 để lắng nghe các sự kiện

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

85 và

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

ví dụ

sử dụng cơ bản

Ví dụ sau đây cho thấy cách sử dụng đơn giản phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

6 để phát tệp OGG. Nó sẽ tự động phát do thuộc tính

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

5—nếu trang có quyền làm như vậy—và cũng bao gồm nội dung dự phòng

 
   
   Play Audio

Để biết chi tiết về thời điểm tự động phát hoạt động, cách xin phép sử dụng tự động phát cũng như cách thức và thời điểm thích hợp để sử dụng tự động phát, hãy xem hướng dẫn tự động phát của chúng tôi

element with element

Ví dụ này chỉ định đoạn âm thanh nào sẽ nhúng bằng cách sử dụng thuộc tính

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

7 trên phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

8 lồng nhau thay vì trực tiếp trên phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

6. Luôn luôn hữu ích khi bao gồm loại MIME của tệp bên trong thuộc tính

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

19, vì trình duyệt có thể biết ngay liệu nó có thể phát tệp đó hay không và không lãng phí thời gian nếu không.

Play Audio Pause Audio

Click The Play Button

với nhiều phần tử

Ví dụ này bao gồm nhiều phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

8. Trình duyệt cố tải phần tử nguồn đầu tiên [Opus] nếu nó có thể phát nó;

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

Mối quan tâm về khả năng tiếp cận

Âm thanh có hộp thoại bằng giọng nói phải cung cấp cả phụ đề và bản ghi mô tả chính xác nội dung của nó. Phụ đề, được chỉ định bằng WebVTT, cho phép những người bị mất thính lực hiểu nội dung của bản ghi âm khi bản ghi đang được phát, trong khi bản ghi cho phép những người cần thêm thời gian có thể xem lại nội dung của bản ghi với tốc độ và định dạng phù hợp

Nếu dịch vụ phụ đề tự động được sử dụng, điều quan trọng là phải xem lại nội dung được tạo để đảm bảo nội dung đó thể hiện chính xác âm thanh nguồn

Phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

6 không hỗ trợ trực tiếp WebVTT. Bạn sẽ phải tìm một thư viện hoặc khung cung cấp khả năng cho bạn hoặc tự viết mã để hiển thị phụ đề. Một tùy chọn là phát âm thanh của bạn bằng phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

70, hỗ trợ WebVTT

Ngoài hộp thoại được nói, phụ đề và bản chép lời cũng phải xác định hiệu ứng âm nhạc và âm thanh để truyền đạt thông tin quan trọng. Điều này bao gồm cảm xúc và giai điệu. Ví dụ: trong WebVTT bên dưới, hãy lưu ý việc sử dụng dấu ngoặc vuông để cung cấp thông tin chi tiết về giọng điệu và cảm xúc cho người xem;

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

Ngoài ra, bạn nên cung cấp một số nội dung [chẳng hạn như liên kết tải xuống trực tiếp] dưới dạng dự phòng cho những người xem sử dụng trình duyệt không hỗ trợ phần tử

const elem = document.querySelector["audio"];

elem.audioTrackList.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTrackList.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

Phương pháp phát âm thanh trong HTML bằng JavaScript

Phương pháp 1. Phát âm thanh trong HTML bằng cách sử dụng JavaScript và HTML onClick Attribute

Thí dụ. Cách phát âm thanh trong HTML bằng JavaScript

Phương pháp 2. Phát âm thanh trong HTML bằng JavaScript Click Event

Phát và tạm dừng âm thanh trong HTML bằng JS

Thí dụ. Phát và tạm dừng âm thanh trong HTML bằng JS

Thử nó

Thuộc tính

Sự kiện

ghi chú sử dụng

Tạo kiểu với CSS

Phát hiện thêm và xóa các bản nhạc

ví dụ

sử dụng cơ bản

element with element

với nhiều phần tử

Mối quan tâm về khả năng tiếp cận

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề