HTML5 giúp dễ dàng thêm âm thanh và nhạc vào các trang web của bạn với phần tử. Thực tế, điều khó làm nhất là tạo nhiều nguồn mà bạn cần để đảm bảo rằng các tệp âm thanh của bạn phát trên nhiều trình duyệt nhất.
Lợi ích của việc sử dụng HTML5 là bạn có thể nhúng âm thanh chỉ bằng cách sử dụng một vài thẻ. Các trình duyệt, sau đó, phát âm thanh giống như chúng sẽ hiển thị hình ảnh khi bạn sử dụng phần tử IMG .
Cách thêm âm thanh vào trang web HTML5
Bạn sẽ cần một Trình soạn thảo HTML , một tệp âm thanh (tốt nhất là ở định dạng MP3) và một trình chuyển đổi tệp âm thanh.
- Đầu tiên, bạn cần một tập tin âm thanh. Tốt nhất là ghi lại tệp dưới dạng MP3 ( .mp3 ) vì tệp này có chất lượng âm thanh cao và được hỗ trợ bởi hầu hết các trình duyệt (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ và Safari 5+).
- Chuyển đổi tệp của bạn sang định dạng Vorbis ( .ogg ) để thêm vào Firefox 3.6+ và hỗ trợ Opera 10.5+. Bạn có thể sử dụng trình chuyển đổi giống như trình tìm kiếm trên Vorbis.com. Bạn cũng có thể chuyển đổi MP3 sang định dạng tệp WAV ( .wav ) để nhận hỗ trợ Firefox và Opera. Tôi khuyên bạn nên đăng tệp của mình ở cả ba loại, chỉ để bảo mật, nhưng hầu hết bạn cần có MP3 và một loại khác.
- Tải tất cả các tệp âm thanh lên máy chủ web của bạn và ghi chú thư mục bạn lưu trữ. Bạn nên đặt chúng vào thư mục con chỉ dành cho tệp âm thanh, như hầu hết các nhà thiết kế lưu hình ảnh trong thư mục hình ảnh .
- Thêm phần tử AUDIO vào tệp HTML của bạn nơi bạn muốn các điều khiển tệp âm thanh được hiển thị. <điều khiển âm thanh>
- Đặt các phần tử SOURCE cho mỗi tệp âm thanh bạn tải lên bên trong phần tử AUDIO :
-
- Bất kỳ HTML nào bên trong phần tử AUDIO sẽ được sử dụng làm dự phòng cho các trình duyệt không hỗ trợ phần tử AUDIO . Vì vậy, thêm một số HTML. Cách dễ nhất là thêm HTML để cho phép họ tải xuống tệp nhưng bạn cũng có thể sử dụng phương pháp nhúng HTML 4.01 để phát âm thanh. Đây là một dự phòng đơn giản:
Trình duyệt của bạn không hỗ trợ phát lại âm thanh, tải xuống tệp:
- Điều cuối cùng bạn cần làm là đóng phần tử AUDIO của bạn:
- Khi bạn hoàn thành, HTML của bạn sẽ trông giống như sau:
Mẹo bổ sung
- Hãy chắc chắn sử dụng loại tài liệu HTML5 () để HTML của bạn sẽ xác thực
- Xem lại các thuộc tính có sẵn cho phần tử để xem bạn có thể thêm các tùy chọn nào khác cho phần tử của mình.
- Lưu ý rằng chúng tôi thiết lập HTML để bao gồm các điều khiển theo mặc định và đã tắt tự động phát. Bạn có thể, tất nhiên, thay đổi điều đó, nhưng hãy nhớ rằng nhiều người tìm thấy âm thanh bắt đầu tự động / rằng họ không thể kiểm soát được gây phiền nhiễu tốt nhất, và thường sẽ chỉ rời khỏi trang khi điều đó xảy ra.