Âm thanh HTML không phát

Click this button to play the audio

Như bạn có thể thấy, chúng tôi chưa bao gồm một phần tử nguồn HTML nào, nhưng tệp âm thanh đã được giới thiệu. Ví dụ này cho thấy một trong những khả năng chính của ngôn ngữ lập trình HTML, cho phép bạn tạo một chức năng theo nhiều cách

Có thông báo cho biết trình duyệt không tương thích với thành phần âm thanh này nếu trình duyệt của người dùng gặp sự cố khi hiển thị tệp âm thanh. Vì các thuộc tính HTML rất quan trọng khi làm việc với phần tử âm thanh HTML, hãy tiếp tục đọc bài viết này để tìm hiểu thêm về chúng

Làm cách nào để triển khai Thẻ âm thanh?

Thẻ âm thanh HTML được sử dụng để phát bất kỳ tệp âm thanh nào trên trang web của bạn và vì điều này, nó còn được gọi là trình phát nhạc HTML. Để thêm nhạc vào tài liệu HTML, bạn nên sử dụng phần tử âm thanh HTML có cả thẻ mở và thẻ đóng. Vì có một số yếu tố mà bạn phải sử dụng đúng cú pháp, hãy xem kỹ danh sách sau đây để tìm hiểu thêm

• Phần tử âm thanh HTML – chỉ được sử dụng làm trình phát cho tài liệu âm thanh
• Phần tử nguồn HTML – được sử dụng để giới thiệu và chỉ định các tệp âm thanh thay thế
• Các thuộc tính HTML cụ thể – được sử dụng để cải thiện và giúp trình duyệt của bạn hiển thị chính xác tệp âm thanh

Các nhà phát triển web nên sử dụng tất cả các yếu tố và thuộc tính này cho một âm thanh phát HTML duy nhất. Cũng cần lưu ý rằng một phần tử âm thanh phát HTML duy nhất có thể chứa nhiều phần tử nguồn HTML. Chúng luôn được lồng vào bên trong các thẻ âm thanh mở và đóng, nơi cũng chứa nội dung của phần tử. Bây giờ, chúng ta hãy tìm hiểu cách tạo cú pháp bằng cách đọc phần sau của bài viết này

Tìm hiểu thêm về các thuộc tính phần tử

Gần như tất cả các phần tử HTML5 đều hỗ trợ việc sử dụng các thuộc tính toàn cầu HTML tạo ra một thứ nguyên khác cho tài liệu của bạn. Phần tử âm thanh HTML thuộc danh mục này, nhưng chúng tôi sẽ không tập trung vào tất cả các thuộc tính toàn cầu HTML trong phần này của bài viết. Thay vào đó, chúng tôi sẽ cho bạn thấy một số thuộc tính phần tử âm thanh HTML cụ thể có thể được đưa vào bên trong thẻ mở. Hãy xem kỹ danh sách dấu đầu dòng sau đây cho biết các thuộc tính thẻ âm thanh cụ thể này

• Thuộc tính tự động phát HTML
• Thuộc tính điều khiển HTML
• Thuộc tính crossorigin HTML
• Thuộc tính vòng lặp HTML
• Thuộc tính tắt tiếng HTML
• Thuộc tính tải trước HTML
• Thuộc tính src HTML

Chúng tôi đã minh họa việc sử dụng một số thuộc tính được đề cập trong danh sách này. Tuy nhiên, sau khi tạo cú pháp âm thanh HTML hoàn chỉnh của bạn, điều quan trọng là phải biết cách triển khai mọi thuộc tính. Do đó, chúng ta sẽ xem xét từng thuộc tính thẻ âm thanh HTML riêng lẻ, giải thích chức năng và cách sử dụng của nó, đồng thời chỉ cho bạn cách viết cú pháp HTML. Vì vậy, không cần phải quảng cáo thêm, chúng ta hãy xem thuộc tính đầu tiên trong danh sách này

– Tự động phát HTML

Tự động phát HTML đại diện cho một thuộc tính Boolean được sử dụng để cho phép khả năng tự động phát tệp âm thanh. Như với mọi thuộc tính HTML khác, bạn phải đưa nó vào trong thẻ âm thanh HTML mở đầu. Phần tử này cực kỳ dễ sử dụng vì nó không yêu cầu bất kỳ giá trị nào và nó sẽ bắt đầu phát tệp ngay sau khi tải xong trang

– Mã Ví dụ 1. Cú pháp tự động phát

Hãy xem kỹ ví dụ sau có chứa thuộc tính tự động phát HTML bên trong thẻ âm thanh mở đầu

Người dùng không phải nhấn bất kỳ nút nào trên trang web để phát tệp âm thanh. Mặt khác, nếu thuộc tính này không có trong cú pháp, thì cần phải bao gồm thuộc tính điều khiển HTML. Vì nó đại diện cho một thuộc tính HTML quan trọng như vậy, chúng ta hãy tìm hiểu thêm về điều khiển âm thanh trong phần sau

– Điều khiển HTML

Như bạn có thể dễ dàng kết luận từ các ví dụ trước, việc sử dụng thuộc tính điều khiển HTML thường là cần thiết. Nó đại diện cho một thuộc tính mới vì nó vừa mới được thêm vào HTML5. Bằng cách viết thuộc tính này bên trong thẻ âm thanh HTML mở, bạn cho phép một số chức năng đối với trang web của mình. Các điều khiển mà người dùng có thể tương tác được hiển thị trong danh sách dấu đầu dòng sau

• Phát – người dùng phải nhấp vào điều khiển này để phát tệp âm thanh
• Tạm dừng – người dùng phải nhấp vào điều khiển này để tạm dừng tệp âm thanh
• Đang tìm kiếm – người dùng phải nhấp vào điều khiển này để tìm kiếm tệp âm thanh
• Âm lượng – người dùng có thể tương tác với điều khiển này để điều chỉnh âm lượng mặc định

Mặc dù có các điều khiển khác mà thuộc tính này giới thiệu trên trang web nhưng chúng không được phần tử âm thanh HTML hỗ trợ. Các điều khiển khác được liên kết với phần tử video HTML và chúng có thể giúp người dùng bật phụ đề, chuyển đổi chế độ toàn màn hình và thậm chí theo dõi tài liệu video. Chúng tôi sẽ không bao gồm một ví dụ trong phần này vì trước đây chúng tôi đã chỉ cho bạn cách triển khai nó đúng cú pháp của bạn

– HTML Crossorigin

Crossorigin HTML đại diện cho một thuộc tính liệt kê cho biết liệu trình duyệt có nên sử dụng CORS để khởi tạo tệp âm thanh liên quan hay không. Điều này có nghĩa là bạn có thể sử dụng lại tài nguyên cụ thể bên trong phần tử canvas HTML mà không làm hỏng tệp. Có một vài giá trị bạn có thể đưa vào cú pháp và chúng được hiển thị trong danh sách sau

• Ẩn danh – nó sẽ gửi yêu cầu nguồn gốc chéo tới trình duyệt mà không có cookie hoặc thông tin xác thực
• Thông tin đăng nhập sử dụng - giá trị này sẽ gửi yêu cầu nguồn gốc chéo tới trình duyệt bằng cookie hoặc thông tin xác thực

Thông thường, nên đưa thuộc tính này vào cú pháp của bạn để cải thiện chức năng của tài liệu âm thanh của bạn. Có thể bao gồm nhiều thuộc tính trong một thẻ âm thanh HTML và tất cả những gì bạn phải làm là tách chúng bằng một khoảng trắng

– Mã Ví dụ 2. Tách các thuộc tính

Tìm hiểu cách sử dụng thuộc tính HTML này bằng cách xem cú pháp sau

Như bạn có thể thấy, chúng tôi đã bao gồm một vài thuộc tính trong thẻ mở và trình duyệt sẽ không gặp bất kỳ sự cố nào khi hiển thị chức năng và sử dụng của nó. Đây là tất cả những gì cần thiết để tìm hiểu mọi thứ về thuộc tính crossorigin HTML. Bây giờ, chúng ta có thể chuyển sang thuộc tính HTML sau

– Vòng lặp HTML

Thuộc tính vòng lặp HTML đại diện cho một thuộc tính Boolean và như tên gọi của nó, nó được sử dụng để làm cho tệp âm thanh phát lại sau khi hoàn tất. Thuộc tính này thường được giới thiệu cho những âm thanh ngắn đáng kể, vì vậy người dùng phải nghe nó nhiều lần. Tất cả những gì người dùng phải làm để hủy chức năng vòng lặp là nhấn bất kỳ điều khiển nào được giới thiệu với thuộc tính điều khiển HTML

– Mã Ví dụ 3

Cú pháp HTML không khác lắm so với các ví dụ trước, như bạn có thể thấy từ đoạn mã sau

Các nhà phát triển web khuyến nghị không bao gồm thuộc tính vòng lặp HTML mà không có các điều khiển. Nếu bạn không bao gồm thuộc tính điều khiển, người dùng sẽ không thể dừng tài liệu âm thanh, điều này đôi khi có thể gây khó chịu. Bây giờ chúng ta hãy tìm hiểu thêm về thuộc tính tắt tiếng HTML

– HTML bị tắt tiếng

Thuộc tính tắt tiếng HTML cũng đại diện cho thuộc tính Boolean được sử dụng để tắt tiếng tài liệu âm thanh theo mặc định. Điều này có nghĩa là người dùng có thể tương tác với tệp âm thanh và khi họ nhấp vào phát, tệp âm thanh sẽ phát nhưng không có bất kỳ âm thanh nào. Tất cả những gì người dùng phải làm để lấy lại âm thanh là nhấp vào nút bật tiếng trên tab điều khiển

– Mã ví dụ 4

Tất cả những gì bạn phải làm để giới thiệu nó với cú pháp của mình là viết nó bên trong thẻ âm thanh HTML mở đầu, như được hiển thị ở đây

Thuộc tính tắt tiếng HTML đại diện cho một trong những chức năng phổ biến nhất mà các nhà phát triển web triển khai trong tài liệu của họ. Vì nó là một thuộc tính Boolean nên bạn không phải gán một giá trị cụ thể, không giống như nhiều thuộc tính HTML phổ biến khác. Chỉ còn một vài thuộc tính để tìm hiểu, vì vậy chúng ta hãy xem thuộc tính tiếp theo

– Tải trước HTML

Thuộc tính tải trước HTML thường được liên kết với phần tử âm thanh HTML để chỉ định cách tải tệp âm thanh. Nói cách khác, nó được người dùng sử dụng khi họ muốn nêu cách tải tài liệu âm thanh ưa thích. Có một số giá trị bạn có thể đưa vào cú pháp và tất cả chúng đều được hiển thị trong danh sách dấu đầu dòng sau

• Tự động – được sử dụng để nói rằng trình duyệt sẽ tải toàn bộ tài liệu âm thanh sau khi tải toàn bộ trang
• Siêu dữ liệu – được sử dụng để nói rằng trình duyệt chỉ nên tải siêu dữ liệu của tài liệu âm thanh sau khi tải trang
• Không - nó được sử dụng để nói rằng trình duyệt không nên tải tệp âm thanh khi tải trang

Thuộc tính này có nhiều ứng dụng thực tế, nhưng nó thường bị người mới bắt đầu bỏ qua khi làm việc với cú pháp của họ. Bao gồm thuộc tính này và giá trị của nó bên trong thẻ âm thanh HTML mở và cú pháp của bạn đã hoàn tất

– Mã ví dụ 5

Như với tất cả các thuộc tính HTML trước đây, hãy xem cú pháp sau để tìm hiểu cách sử dụng nó

Bạn yêu cầu trình duyệt của mình không tải tài liệu âm thanh sau khi tải trang web bằng cách viết cú pháp đơn giản này. Tuy nhiên, có một thuộc tính nữa mà bạn phải tìm hiểu chi tiết hơn nhiều so với giải thích trước đây. Tiếp tục đọc phần sau của bài viết này giải thích thuộc tính src HTML

– HTML Src

Thuộc tính src HTML được sử dụng làm công cụ xác định cho URL của tài liệu âm thanh được liên kết. Trong phần mở đầu của bài viết này, chúng tôi đã chỉ cho bạn cách triển khai nó đúng cú pháp của bạn. Vì một thuộc tính src HTML duy nhất phải chứa một giá trị URL duy nhất, chúng ta hãy tìm hiểu thêm về chúng. Hãy xem danh sách sau đây cho thấy hai liên kết URL có thể có mà bạn có thể đưa vào cú pháp của mình

• Tạo một URL tương đối – liên kết tài liệu âm thanh từ cùng một trang web
• Tạo một URL tuyệt đối – liên kết tài liệu âm thanh từ một trang web khác

Nếu bạn đang tạo một URL tuyệt đối, tất cả những gì bạn phải làm là sao chép toàn bộ liên kết của tài liệu âm thanh và dán nó làm giá trị cho thuộc tính src. Mặt khác, chỉ định đường dẫn và vị trí của tài liệu âm thanh nằm trên cùng một trang web bằng URL tương đối. Đây là tất cả những gì cần thiết để tìm hiểu mọi thứ về cách sử dụng thẻ âm thanh HTML đúng cách và tất cả các thuộc tính của nó trong tài liệu của bạn. Cuối cùng, chúng ta hãy xem tóm tắt tất cả các điểm quan trọng từ bài viết này

Lời cuối cùng và ghi chú bổ sung

Phần tử âm thanh HTML được sử dụng để chèn và phát một tệp âm thanh cụ thể trên trang web của bạn. Rất nhiều điểm quan trọng và chi tiết đã được đề cập trong bài viết này, và tất cả chúng đều được tóm tắt trong danh sách gạch đầu dòng sau đây

• Có thể lồng phần tử HTML này bên trong các phần tử khác trong tài liệu
• Thuộc tính nguồn HTML thường được lồng bên trong thẻ âm thanh HTML mở và đóng
• Bạn phải bao gồm các thuộc tính cho phần tử âm thanh bên trong thẻ mở
• Thuộc tính phổ biến nhất là các điều khiển HTML giới thiệu giao diện người dùng
• Có thể tạo cú pháp âm thanh HTML đầy đủ chức năng mà không cần phần tử nguồn

5/5 - (19 phiếu bầu)

• Tác giả
• Bài viết gần đây

Vị trí là tất cả

Vị trí là tất cả. Tài nguyên Go-To của bạn để Tìm hiểu & Xây dựng. CSS, JavaScript, HTML, PHP, C++ và MYSQL

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

Phần tử HTML .

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

Thuộc tính HTML được sử dụng để chỉ định rằng âm thanh sẽ tự động bắt đầu phát ngay khi được tải. Nó là một thuộc tính Boolean.

Làm cách nào để nhúng âm thanh vào HTML?

Làm cách nào để nhúng âm thanh vào HTML? . Trước HTML5, không thể thêm âm thanh vào các trang web trong kỷ nguyên Internet Explorer. Để phát âm thanh, chúng tôi đã sử dụng các plugin web như Flash. use the . Before HTML5, audio cannot be added to web pages in the Internet Explorer era. To play audio, we used web plugins like Flash.

Làm cách nào tôi có thể phát nhạc bằng HTML trên trang web của mình?

Hoàn thành khóa học HTML/CSS 2022 . Ngoài ra, hãy sử dụng thuộc tính tự động phát. Điều này sẽ chạy nhạc ở chế độ nền bất cứ khi nào tải trang. use the … element. Also, use the autoplay attribute. This will run music in the background whenever the page loads.