Tệp âm thanh tải xuống HTML

Ví dụ này cung cấp triển khai

Generate Waveform

6 thô sơ giúp trực quan hóa âm thanh bằng dạng sóng [xem tài liệu tham khảo]

Generate Waveform

Hình 4-3. Hiển thị sóng âm thanh qua canvas trong Firefox 5

Trong giải pháp này, chúng tôi kết hợp những gì được thảo luận về

Generate Waveform

6 trong Chương 9 với một số phương pháp từ Mozilla Audio Data API. Hãy chia nhỏ từng phần một, bắt đầu với yếu tố cốt lõi

Generate Waveform

8,

Generate Waveform

6 và một

Generate Waveform

0 để kích hoạt trực quan hóa

Generate Waveform

Ghi chú

Để cho ngắn gọn, tôi đang sử dụng thuộc tính

Generate Waveform

1 cho

Generate Waveform

8 trong ví dụ này, nhưng điều này cũng sẽ hoạt động với nhiều phần tử

Generate Waveform

3

Tiếp theo, thêm màu nền thông qua CSS để biểu thị một bản trình bày đơn giản cho

Generate Waveform

6

Ghi chú

Lưu ý rằng các giá trị

Generate Waveform

5 và

Generate Waveform

6 trong

Generate Waveform

6 là thuộc tính DOM, không phải thuộc tính kiểu. Do đó, bạn cần chỉ định chúng trong phần đánh dấu chứ không phải CSS để trình duyệt biết kích thước của không gian vẽ của nó. Xem Chương 9 để biết thêm về

Generate Waveform

6

Và bây giờ cho JavaScript. Đầu tiên, thiết lập một chức năng tổng thể để tạo sóng

Giống như việc tạo âm thanh theo thời gian thực bằng JavaScript [xem ] chỉ giới hạn ở Firefox 4+, phương pháp trực quan hóa

Generate Waveform

8 này với

Generate Waveform

6 cũng vậy. Điều này là do chỉ Mozilla Audio Data API mới cho phép bạn truy cập dữ liệu âm thanh chính [trong ví dụ này là

1] cần thiết để tạo bản vẽ

Generate Waveform

6

Hơn nữa, phương pháp trực quan hóa âm thanh này phải chạy trên máy chủ web và nó yêu cầu tệp âm thanh nằm trên cùng một máy chủ do các biện pháp bảo mật của Firefox []

Thẻ

Generate Waveform

7 tạo trình phát âm thanh trên trang web

Nó hỗ trợ các điều khiển phương tiện, như phát, tạm dừng, âm lượng và tắt tiếng

Trình phát

Generate Waveform

7 có điều khiển. phát, tạm dừng, âm lượng, v.v.

Generate Waveform

0Thử trực tiếp

Ghi chú. Theo mặc định, trình phát

Generate Waveform

7 không có hình ảnh đại diện và ẩn. Thêm thuộc tính điều khiển làm cho nó xuất hiện [i. e. có thể nhìn thấy]

Thẻ

Generate Waveform

7 tham chiếu một hoặc nhiều tệp âm thanh có thuộc tính src hoặc phần tử

Trình duyệt sẽ chọn tệp đầu tiên có định dạng tệp mà nó hỗ trợ

Các định dạng tệp âm thanh được hỗ trợ bao gồm MP3, WAV và OGG

Một thẻ

Generate Waveform

7 chỉ định hai tệp âm thanh.
Trình duyệt sử dụng loại tệp đầu tiên mà nó hỗ trợ.

Trình duyệt của bạn không hỗ trợ yếu tố âm thanh

Generate Waveform

1Thử trực tiếp

Giải thích mã

• 
  Generate Waveform

  7 - ​​xác định phần tử âm thanh
• điều khiển - cho phép điều khiển âm thanh. phát, tạm dừng, âm lượng, tắt tiếng và tải xuống
• - xác định nguồn tệp âm thanh
  • src - URL hoặc tên tệp của âm thanh để phát
  • loại - định dạng tệp của âm thanh

Ghi chú. Đối với nhiều nguồn, loại tệp được hỗ trợ đầu tiên sẽ phát

Bảng này liệt kê các thuộc tính thẻ

Generate Waveform

7

Thuộc tính Giá trị được chấp nhậnMô tảđiều khiểnkhông có giá trịBật điều khiển âm thanh như phát/tạm dừng, âm lượng và các điều khiển khác. srcURLURL tệp âm thanh / đường dẫn. id  số nhận dạng Xác định một số nhận dạng duy nhất cho âm thanh. class  classnamesĐặt một hoặc nhiều lớp CSS được áp dụng cho âm thanh. style  CSS-stylesĐặt kiểu cho âm thanh. data-*  valueXác định dữ liệu bổ sung mà JavaScript có thể sử dụng.
hidden  hiddenChỉ định âm thanh có bị ẩn hay không. title  giá trịĐặt tiêu đề hiển thị dưới dạng chú giải công cụ. autoplayno valueCho trình duyệt biết rằng âm thanh sẽ bắt đầu phát ngay lập tứcloopno valueChỉ định rằng âm thanh được lặp lại mỗi khi nó hoàn thànhmutedno valueCho trình duyệt biết rằng âm thanh phải được tắt tiếng [im lặng]. preloadauto
siêu dữ liệu
noneChỉ định cách tệp âm thanh được tải sau khi trang đã được tảicrossoriginanonymous
use-credentialsChỉ định cách xử lý yêu cầu crossorigin.

Để biết các thuộc tính toàn cầu bổ sung, hãy xem

Bảng này liệt kê các định dạng âm thanh mà mỗi trình duyệt hỗ trợ

Trình duyệtMP3WAVOGG

CóKhôngKhông

Có có có

Có có có

CóCóKhông

Có có có

Các loại phương tiện cho tệp âm thanh

Đây là các loại phương tiện cho từng định dạng tệp âm thanh

FormatMedia-typeMP3audio/mpegOGGaudio/oggWAVaudio/wav

Thẻ

Generate Waveform

7 có thuộc tính vòng lặp.
Tệp âm thanh sẽ phát lặp lại.

Generate Waveform

2Hãy thử trực tiếp

Thẻ

Generate Waveform

7 có thuộc tính tắt tiếng.
Thuộc tính này tắt tiếng [im lặng] âm thanh. Nó chơi nhưng không có âm thanh.

Generate Waveform

2Hãy thử trực tiếp

Phần tử

Generate Waveform

7 hiển thị một DOM [Mô hình đối tượng tài liệu].
Điều này cho phép JavaScript kiểm soát âm thanh theo chương trình.

Các nút phát và tạm dừng một

Generate Waveform

7 ẩn bằng JavaScript

Vui lòng nâng cấp trình duyệt của bạn để phát âm thanh. Tạm dừng chơi

Generate Waveform

4Hãy thử trực tiếp

Phát phần tử âm thanh trong bộ nhớ

JavaScript có thể tạo phần tử âm thanh trong bộ nhớ và sau đó phát tệp âm thanh

Nhấp vào nút phát và JavaScript sẽ phát tệp âm thanh -- tất cả đều không có thẻ

Generate Waveform

7

Generate Waveform

5Thử trực tiếp

Thẻ

Generate Waveform

7 là một phần của nhóm thẻ tạo trải nghiệm đa phương tiện trên web. Nhóm này được gọi là nhóm thẻ Media. Cùng với nhau, chúng cho phép bạn tạo ra các giải pháp đa phương tiện mạnh mẽ

Tệp âm thanh có thể phát trong trang HTML không?

Làm cách nào để tải xuống âm thanh MP3?

Làm cách nào để tải xuống tệp âm thanh javascript?