Hướng dẫn css audio

1) Thẻ

- Thẻ được dùng để tạo một "trình phát nhạc" cho trang web.

- Ví dụ: Bên dưới là một trình phát nhạc.

- Để tạo một trình phát nhạc thì thẻ

- Đoạn mã bên dưới dùng để tạo một 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ẻ

- 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 tin âm thanh mà bạn muốn phát

controls

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

autoplay

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

loop

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

muted

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

preload

Xác định việc tập tin âm thanh có được tải cùng với lúc tải trang hay không

2.1) Thuộc tính src

- Thuộc tính src dùng để xác định đường dẫn đến tập tin â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ẻ


Xem ví dụ

2.2) Thuộc tính autoplay

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


Xem ví dụ

2.3) Thuộc tính controls

- Thuộc tính controls xác định 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ẻ


Xem ví dụ

2.4) Thuộc tính loop

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


Xem ví dụ

2.5) Thuộc tính muted

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


Xem ví dụ

2.6) Thuộc tính preload

Mặc định khi trang web được tải thì tập tin âm thanh của trình phát nhạc cũng được tải 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 cùng với lúc tải trang hay không.

- Thuộc tính preload có hai giá trị:

auto

Tập tin âm thanh sẽ được tải cùng với lúc tải trang

none

Tập tin âm thanh sẽ KHÔNG được tải cùng với lúc tải trang
(nó chỉ được tải khi người dùng bấm vào nút play)


Xem ví dụ

3) Những định dạng âm thanh được hỗ trợ

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

Format

MIME-type

MP3

audio/mpeg

Wav

audio/wav

Ogg

audio/ogg

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

Trình duyệtMP3WavOgg
Chrome

Firefox

Opera

Safari

KHÔNG

Internet Explorer

KHÔNG

KHÔNG

- Để đề phòng trường hợp trình duyệt không hỗ trợ định dạng tập tin âm thanh của bạn, bạn có thể "sơ cua" thêm một vài tập tin âm thanh khác bằng những thẻ khác (nếu định dạng tập tin âm thanh thứ nhất không được hỗ trợ thì nó sẽ chuyển sang sử dụng tập tin âm thanh thứ hai, ....)


Xem ví dụ