Javascript chơi tập tin wav

- Tạo một trình phát nhạc, thẻ Để cần phải được sử dụng kết hợp với thẻ để xác định tập tin âm thanh mà bạn muốn phát

- Sử dụng bên dưới để tạo một chương trình phát nhạc giống như ví dụ phía trên.

Xem ví dụ

2] Các thuộc tính được sử dụng trong thẻ

- Thẻ có sáu thuộc tính cơ bản

- Dưới đây là bảng mô tả sơ lược về sáu thuộc tính đó

src

Xác định đường dẫn đến tệp âm thanh mà bạn muốn phát

điều khiển

Specify job "trình phát nhạc sẽ được hiển thị trên màn hình"

tự chạy

Thiết lập hành động.
"sau khi trang web tải xong, trình phát nhạc sẽ tự động phát bản nhạc"

vòng

Thiết lập hành động "bản nhạc sẽ tự động được phát lại sau mỗi lần kết thúc"

tắt tiếng

Specify the player player will be default setting at mode "tắt tiếng"

tải trước

Specify the sound file has been loading same as at download page or not

2. 1] Thuộc tính src

- Sử dụng thuộc tính src để xác định đường dẫn đến tệp âm thanh mà bạn muốn phát

- Lưu ý. "Đường dẫn đến tập tin âm thanh mà bạn muốn phát" có thể được xác định bằng đường dẫn tương đối hoặc đường dẫn tuyệt đối

Xem ví dụ

- Tuy nhiên, hầu hết các lập trình viên không sử dụng thuộc tính src của thẻ để xác định đường dẫn đến tệp âm thanh mà bạn muốn phát. Họ sử dụng thẻ, vì thẻ có hỗ trợ thêm nhiều thuộc tính, giúp trình phát nhạc trở nên đa năng hơn

Xem ví dụ

2. 2] Autoplay Thuộc tính

- Thuộc tính tự động phát thiết lập hành động "sau khi trang web được tải xuống, trình phát nhạc sẽ tự động chơi bản nhạc"

Xem ví dụ

2. 3] Thuộc tính điều khiển

- Thuộc tính điều khiển xác định công việc "trình phát nhạc sẽ được hiển thị trên màn hình"

- Trình phát nhạc bên dưới ĐƯỢC hiển thị.

  



    

- Trình phát nhạc bên dưới KHÔNG ĐƯỢC hiển thị.

    

Xem ví dụ

- Lưu ý. Thẻ không có thuộc tính điều khiển thì trình phát nhạc không hiển thị. Tuy nhiên, nếu tồn tại thuộc tính autoplay thì bản nhạc vẫn được phát bình thường

Xem ví dụ

2. 4] Vòng lặp thuộc tính

- Vòng lặp thuộc tính thiết lập hành động "bản nhạc sẽ tự động được phát lại sau mỗi lần kết thúc"

Xem ví dụ

2. 5] Thuộc tính tắt tiếng

- Thuộc tính tắt tiếng xác định việc phát nhạc trình sẽ mặc định được thiết lập ở chế độ "tắt tiếng"

Xem ví dụ

2. 6] Thuộc tính tải trước

Mặc định khi trang web được tải xuống thì tập tin âm thanh của trình phát nhạc cũng được tải xuống theo, điều đó đồng nghĩa với việc tốc độ tải trang bị chậm lại

- Thuộc tính preload xác định việc tập tin âm thanh có được tải xuống cùng lúc tải trang hay không

- preload property has two value

tự động

The sound file will be loading the same at loading page

không ai

Tập tin âm thanh sẽ KHÔNG được tải xuống cùng lúc tải trang
[nó chỉ được tải xuống khi người dùng nhấn vào nút phát]

Xem ví dụ

3] Các định dạng âm thanh được hỗ trợ

- Hiện nay có ba loại biến định dạng âm thanh phổ biến được hỗ trợ trên các trình duyệt. MP3, Wav, Ogg

Định dạng

kiểu MIME

MP3

âm thanh/mpeg

sóng

âm thanh/wav

Ogg

âm thanh/ogg

- Tuy nhiên, không phải tất cả các trình duyệt đều hỗ trợ hết ba loại định dạng âm thanh này

Trình duyệtMP3WavOggChrome

CÓ

CÓ

CÓ

firefox

CÓ

CÓ

CÓ

Ô-pê-ra

CÓ

CÓ

CÓ

Cuộc đi săn

CÓ

CÓ

KHÔNG

trình duyệt web IE

CÓ

KHÔNG

KHÔNG

- Để đề phòng trường hợp trình duyệt không hỗ trợ định dạng tệp âm thanh của bạn, bạn có thể "sơ cua" thêm một số tệp âm thanh khác bằng các thẻ

Trong bài viết hôm nay mình sẽ giới thiệu đến các bạn những thư viện giúp tạo và xử lý âm thanh trong trang web đã lập trình viên tin tưởng và sử dụng phổ biến trong năm 2022 xử lý nhé

Thư Viện Audio HTML

HowlerJS

HowlerJS là một thư viện mã nguồn mở được xây dựng bằng Javascript với kích thước chỉ khoảng 7KB giúp bạn tạo cũng như xử lý âm thanh một cách dễ dàng cho trang web. Với sự kết hợp giữa API và HTML5 Audio nên nó có thể chạy trên nhiều nền tảng và trình duyệt web khác nhau bao gồm cả IE9 và Cordova. Một số điểm mạnh của HowlerJS là khả năng mở rộng dễ dàng thông qua kiến ​​trúc chia mô-đun, hỗ trợ hầu hết các loại tệp âm thanh phổ biến ngày nay như MP3, MPEG, OPUS, OGG, OGA, WAV, AAC, CAF . , bộ nhớ đệm tự động giúp tăng hiệu suất của trang web cũng như băng thông của máy chủ. Ngoài ra nó còn cung cấp cho bạn một số thuộc tính để có thể tinh chỉnh chương trình phát media để phù hợp với trang web như xác định âm lượng ban đầu, có tự động phát hay không, tính năng lặp lại bài hát khi

Nguồn HowlerJS

Biên độJS

AmplitudeJS là một thư viện Javascript nhỏ gọn giúp bạn có thể thiết kế kế hoạch phát âm thanh cho trang web một cách dễ dàng thông qua việc gọi lớp và các thuộc tính cho đối tượng HTML. Ví dụ bạn muốn hiển thị thời gian cho trình phát âm thanh thì chúng ta có thể gọi như sau . Một số tính năng hữu ích của AmplitudeJS là đáp ứng và thay đổi chức năng dựa trên thiết bị sử dụng, cung cấp các điều khiển nâng cao, hỗ trợ cho việc phát trực tiếp, dễ dàng tính toán các chức năng. Ngoài ra nó còn có các bài hướng dẫn chi tiết về cách thiết lập và ứng dụng cho trang web, các bạn có thể tham khảo thêm trong trang Tài liệu nhé

Nguồn Biên độJS

Nhịp điệu

Rythmjs là một thư viện Javascript giúp bạn có thể thiết kế các trình phát âm thanh sáng tạo thông qua việc kết hợp giữa âm nhạc và các hiệu ứng chuyển động cho các đối tượng trong trang web. Bạn có thể tạo các dấu hiệu này một cách dễ dàng bằng cách gọi các lớp cho các đối tượng HTML mà mình mong muốn. Và nó cũng cung cấp một số hiệu ứng giúp bạn có thể lựa chọn phong cách hơn cho trang web của mình như làm mờ, xoay, nhảy, lắc. Phần này bạn tham khảo thêm ví dụ trong trang demo của nó nhé

Nguồn Rythmjs

giai điệu

Tonejs là một khung web âm thanh giúp bạn tạo các tương tác với âm nhạc trong trình duyệt và đối tượng chủ yếu hướng tới những thành viên lập trình muốn tạo các ứng dụng âm thanh trên web. Nó cung cấp một hệ thống mạnh mẽ và linh hoạt giúp bạn có thể kiểm soát âm thanh tốt hơn như chọn nguồn âm thanh, thêm các hiệu ứng âm thanh, tạo các hình ảnh hóa âm thanh. và một điểm mạnh nữa của Tonejs là bạn có thể tạo ra những âm thanh kỹ thuật số cho riêng mình bằng thư viện này thông qua API. [Cái này thì chủ yếu dành cho nhạc sĩ là chủ yếu thôi nhé] Nó cũng có các ví dụ bổ sung như hướng dẫn chi tiết cho từng chức năng, các bạn có thể tham khảo thêm ở phần demo nhé

Nguồn Tonejs

Wavesurfer Js

Wavesurferjs là một thư viện mã nguồn mở được xây dựng dựa trên Web Audio API và HTML5 Canvas giúp bạn có thể tạo các trình phát HTML5 Audio từ cơ bản đến nâng cao cho trang web của mình. Ngoài ra nó còn tích hợp thêm các tính năng hiển thị dạng sóng trực quan hóa [trực quan hóa dạng sóng] cho âm thanh đang được phát trên trình duyệt. Ngoài ra nó còn cung cấp một số thuộc tính giúp bạn có thể dễ dàng chỉnh sửa tinh chỉnh để phù hợp với trang web như điều chỉnh tốc độ âm thanh, chèn các đoạn script xử lý âm thanh, điều chỉnh màu sắc độ mở rộng của dạng sóng

Nguồn Wavesurferjs

Trình quản lý âm thanh 2

SoundManager 2 là một thư viện mã nguồn giúp bạn dễ dàng tạo trình phát âm thanh cho trang web thông qua việc sử dụng Javascript. Với nhiều tính năng hữu ích như tương thích trên hầu hết các thiết bị và trình duyệt hiện tại [bao gồm cả IE6], hiệu suất tối ưu cho trang web khi sử dụng, hỗ trợ nhiều định dạng âm thanh như mp3, ogg, . và nó cũng cung cấp các thuộc tính giúp bạn có thể tinh chỉnh trình phát âm thanh như lắng nghe các sự kiện từ người dùng, thiết lập màu chủ đạo, chế độ hiển thị danh sách các bài hát, trình phát âm thanh 360 độ

Nguồn SoundManager 2

PizzicatoJS

PizzicatoJS là thư viện được xây dựng bằng Javascript với mục đích là cung cấp cho lập trình viên một cách đơn giản để tạo và thao tác với âm thanh thông qua Web Audio API. Ngoài ra, chúng ta có thể tạo âm thanh thông qua nhiều cách như từ micrô, dạng sóng, tệp. or is group many file sound back with nhau. Nó cấp một số hiệu ứng để thêm vào file âm thanh giúp tạo ra những âm thanh tuyệt vời hơn cho trang web [các bạn tham khảo thêm trong phần ADD EFFECTS nhé]

Nguồn PizzicatoJS

Người chơi

APlayer là một trình phát âm thanh HTML5 cho trang web với thiết kế có tính thẩm mỹ cao. Một số điểm mạnh của thư viện này là cho phép chọn màu giả chủ đạo cho trình phát âm thanh, xác định giá trị âm lượng mặc định, thêm các chú thích về tên bài hát hay tác phẩm, giới hạn danh sách bài hát

Nguồn APlayer

Other number Thư Viện Audio Bổ Sung

Nguồn SoundJS Nguồn Danh sách phát dạng sóng Nguồn Blip

Bài viết liên quan

• HTML Audio Reserved Cho Website

Tổng kết

Qua đây mình mong bài viết sẽ cung cấp thêm cho các bạn những thư viện Javascript Audio hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi mail mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ