Html nhấp vào hình ảnh để phát mp3
Trong một số trường hợp, chúng tôi không muốn hiển thị Điều khiển mặc định do Trình duyệt của chúng tôi cung cấp để hiển thị Dữ liệu của thẻ âm thanh HTML và muốn kiểm soát Dữ liệu âm thanh HTML bằng Điều khiển tùy chỉnh. Show
Phương pháp phát âm thanh trong HTML bằng JavaScriptCó một số phương pháp để phát âm thanh trong HTML bằng JavaScript. Nơi chúng ta có thể gọi hàm JavaScript để phát Dữ liệu âm thanh trong Tài liệu HTML của mình. Phương pháp 1. Phát âm thanh trong HTML bằng cách sử dụng JavaScript và HTML onClick AttributeĐể phát Âm thanh HTML bằng JavaScript và Thuộc tính HTML onCLick, chúng ta cần tạo một Hàm, Hàm này sẽ chạy bằng thuộc tính HTML onClick. Thí dụ. Cách phát âm thanh trong HTML bằng JavaScriptPlay Audio Phương pháp 2. Phát âm thanh trong HTML bằng JavaScript Click EventNếu bạn không thích sử dụng thuộc tính HTML onClick để chạy một Hàm JavaScript, thì bạn có thể sử dụng Trình xử lý sự kiện của JavaScript để chạy một tác vụ JavaScript cụ thể trên một lần Nhấp vào nút. Play Audio Phát và tạm dừng âm thanh trong HTML bằng JSTrong 2 Ví dụ cuối cùng của chúng tôi, chúng tôi có thể phát tệp Âm thanh của mình. Thí dụ. Phát và tạm dừng âm thanh trong HTML bằng JSPlay Audio Pause Audio Phần tử HTML 6 được sử dụng để nhúng nội dung âm thanh vào tài liệu. Nó có thể chứa một hoặc nhiều nguồn âm thanh, được biểu diễn bằng thuộc tính 7 hoặc phần tử 8. trình duyệt sẽ chọn cái phù hợp nhất. Nó cũng có thể là đích đến cho phương tiện truyền trực tuyến, sử dụng một 0Thử nóVí dụ trên cho thấy cách sử dụng đơn giản của phần tử 6. Theo cách tương tự với phần tử 2, chúng tôi bao gồm một đường dẫn đến phương tiện mà chúng tôi muốn nhúng vào bên trong thuộc tính 7; Nội dung bên trong các thẻ mở và đóng 4 được hiển thị dưới dạng dự phòng trong các trình duyệt không hỗ trợ phần tửThuộc tínhCác thuộc tính của phần tử này bao gồm các thuộc tính toàn cục 5Một thuộc tính Boolean. nếu được chỉ định, âm thanh sẽ tự động bắt đầu phát lại ngay khi có thể làm như vậy mà không cần đợi toàn bộ tệp âm thanh tải xuống xong Ghi chú. Các trang web tự động phát âm thanh (hoặc video có bản âm thanh) có thể gây khó chịu cho người dùng, vì vậy nên tránh khi có thể. Nếu bạn phải cung cấp chức năng tự động phát, bạn nên chọn tham gia (yêu cầu người dùng bật cụ thể chức năng này). Tuy nhiên, điều này có thể hữu ích khi tạo các phần tử phương tiện có nguồn sẽ được đặt sau, dưới sự kiểm soát của người dùng. Xem hướng dẫn tự động phát của chúng tôi để biết thêm thông tin về cách sử dụng tự động phát đúng cách 6Nếu có thuộc tính này, trình duyệt sẽ cung cấp các điều khiển để cho phép người dùng điều khiển phát lại âm thanh, bao gồm âm lượng, tìm kiếm và tạm dừng/tiếp tục phát lại 7 Thử nghiệm Phi chuẩnThuộc tính 7, khi được chỉ định, sẽ giúp trình duyệt chọn điều khiển nào sẽ hiển thị cho phần tử 9 bất cứ khi nào trình duyệt hiển thị bộ điều khiển của chính nó (nghĩa là khi thuộc tính 6 được chỉ định)Các giá trị được phép là Play Audio21, Play Audio22 và Play Audio23 Play Audio24 Thuộc tính liệt kê này cho biết có nên sử dụng CORS để tìm nạp tệp âm thanh liên quan hay không. Các tài nguyên hỗ trợ CORS có thể được sử dụng lại trong phần tử Play Audio25 mà không bị nhiễm độc. Các giá trị được phép là Play Audio26 Gửi yêu cầu nguồn gốc chéo mà không cần thông tin xác thực. Nói cách khác, nó gửi tiêu đề HTTP Play Audio27 mà không có cookie, X. 509 hoặc thực hiện xác thực HTTP Basic. Nếu máy chủ không cung cấp thông tin xác thực cho trang gốc (bằng cách không đặt tiêu đề HTTP Play Audio28), tài nguyên sẽ bị nhiễm độc và việc sử dụng nó bị hạn chế Play Audio29 Gửi yêu cầu nguồn gốc chéo với thông tin xác thực. Nói cách khác, nó gửi tiêu đề HTTP Play Audio27 với cookie, chứng chỉ hoặc thực hiện xác thực HTTP Basic. Nếu máy chủ không cung cấp thông tin xác thực cho trang gốc (thông qua tiêu đề HTTP Play Audio Pause Audio21), tài nguyên sẽ bị nhiễm độc và việc sử dụng nó bị hạn chế Khi không có mặt, tài nguyên được tìm nạp mà không có yêu cầu CORS (i. e. mà không gửi tiêu đề HTTP Play Audio27), ngăn việc sử dụng không bị nhiễm độc của nó trong các phần tử Play Audio25. Nếu không hợp lệ, nó sẽ được xử lý như thể từ khóa ẩn danh đã được sử dụng. Xem thuộc tính cài đặt CORS để biết thêm thông tin Play Audio Pause Audio24 Thử nghiệm Thuộc tính Boolean được sử dụng để tắt khả năng phát lại từ xa trong các thiết bị được kết nối bằng dây (HDMI, DVI, v.v. ) và công nghệ không dây (Miracast, Chromecast, DLNA, AirPlay, v.v. ). Xem thông số kỹ thuật được đề xuất này để biết thêm thông tin Ghi chú. Trong Safari, bạn có thể sử dụng Play Audio Pause Audio25 làm dự phòng Play Audio Pause Audio26 Một thuộc tính Boolean. nếu được chỉ định, trình phát âm thanh sẽ tự động quay lại từ đầu khi đến phần cuối của âm thanh Play Audio Pause Audio27 Thuộc tính Boolean cho biết liệu âm thanh ban đầu có bị tắt tiếng hay không. Giá trị mặc định của nó là Play Audio Pause Audio28 Play Audio Pause Audio29 Thuộc tính liệt kê này nhằm cung cấp gợi ý cho trình duyệt về những gì tác giả cho rằng sẽ mang lại trải nghiệm tốt nhất cho người dùng. Nó có thể có một trong các giá trị sau
Giá trị mặc định khác nhau đối với mỗi trình duyệt. Thông số kỹ thuật khuyên nó nên được đặt thành 11Ghi chú
7URL của âm thanh để nhúng. Điều này tuân theo các điều khiển truy cập HTTP. Đây là tùy chọn; Sự kiệnTên sự kiện Được kích hoạt khi 90Bộ đệm đầu vào của 91 đã sẵn sàng để được xử lý. 92Trình duyệt có thể phát phương tiện, nhưng ước tính rằng không đủ dữ liệu đã được tải để phát phương tiện cho đến hết mà không phải dừng để tải thêm nội dung vào bộ đệm. 93Trình duyệt ước tính nó có thể phát phương tiện đến hết mà không dừng lại để lưu vào bộ đệm nội dung. 94Việc hiển thị của một 95 bị chấm dứt. 96Thuộc tính 97 đã được cập nhật. 98Các phương tiện đã trở nên trống rỗng; . 90Phát lại đã dừng vì đã đến cuối phương tiện. 91Khung hình đầu tiên của phương tiện đã tải xong. 92Siêu dữ liệu đã được tải. 93Phát lại đã bị tạm dừng. 94Phát lại đã bắt đầu. 95Phát lại đã sẵn sàng bắt đầu sau khi bị tạm dừng hoặc trì hoãn do thiếu dữ liệu. 96Tốc độ phát lại đã thay đổi. 97Một hoạt động tìm kiếm đã hoàn thành. 98Một hoạt động tìm kiếm đã bắt đầu. 99Tác nhân người dùng đang cố gắng tìm nạp dữ liệu phương tiện, nhưng dữ liệu bất ngờ không xuất hiện. 60Tải dữ liệu phương tiện đã bị treo. 61Thời gian được chỉ định bởi thuộc tính 62 đã được cập nhật. 63Âm lượng đã thay đổi. 64Phát lại đã dừng do thiếu dữ liệu tạm thờighi chú sử dụngKhông phải tất cả các trình duyệt đều hỗ trợ các loại tệp và codec âm thanh giống nhau; 9Chúng tôi cung cấp hướng dẫn cụ thể và kỹ lưỡng về các loại tệp phương tiện và codec âm thanh có thể được sử dụng trong chúng. Ngoài ra còn có hướng dẫn về codec được hỗ trợ cho video Ghi chú sử dụng khác
Một nguồn thông tin chung tốt về cách sử dụng HTML 6 là Hướng dẫn dành cho người mới bắt đầu sử dụng nội dung âm thanh và videoTạo kiểu với CSSPhần tử 6 không có đầu ra hình ảnh nội tại của riêng nó trừ khi thuộc tính 6 được chỉ định, trong trường hợp đó, các điều khiển mặc định của trình duyệt được hiển thịCác điều khiển mặc định có giá trị 74 là 75 theo mặc định và thường nên đặt giá trị thành 76 để cải thiện khả năng kiểm soát đối với vị trí và bố cục, trừ khi bạn muốn nó nằm trong một khối văn bản hoặc tương tựBạn có thể tạo kiểu cho các điều khiển mặc định bằng các thuộc tính ảnh hưởng đến khối dưới dạng một đơn vị, vì vậy, ví dụ: bạn có thể đặt cho khối đó là 77 và 78, 79, 80, v.v. Tuy nhiên, bạn không thể tạo kiểu cho các thành phần riêng lẻ bên trong trình phát âm thanh (e. g. thay đổi kích thước nút hoặc biểu tượng, thay đổi phông chữ, v.v. ) và các điều khiển khác nhau trên các trình duyệt khác nhauĐể có giao diện nhất quán trên các trình duyệt, bạn cần tạo các điều khiển tùy chỉnh; Khái niệm cơ bản về tạo kiểu trình phát video cung cấp một số kỹ thuật tạo kiểu hữu ích — nó được viết trong ngữ cảnh của 70, nhưng phần lớn trong số đó có thể áp dụng như nhau cho 6Phát hiện thêm và xóa các bản nhạcBạn có thể phát hiện thời điểm các bản nhạc được thêm vào và xóa khỏi phần tử 6 bằng cách sử dụng các sự kiện 85 và 86. Tuy nhiên, những sự kiện này không được gửi trực tiếp đến chính phần tử 6. Thay vào đó, chúng được gửi đến đối tượng danh sách bản nhạc trong 67 của phần tử 6 tương ứng với loại bản nhạc đã được thêm vào phần tử 00Một 01 chứa tất cả các rãnh âm thanh của phần tử phương tiện. Bạn có thể thêm một người nghe cho 85 vào đối tượng này để được cảnh báo khi các bản âm thanh mới được thêm vào phần tử 03Thêm một trình nghe 85 vào đối tượng 05 này để được thông báo khi các bản nhạc video được thêm vào phần tử 06Thêm trình xử lý sự kiện 85 vào 08 này để được thông báo khi các bản nhạc văn bản mới được thêm vào phần tửGhi chú. Mặc dù đó là một phần tử 6, nhưng nó vẫn có danh sách theo dõi video và văn bản và trên thực tế có thể được sử dụng để trình bày video, mặc dù ý nghĩa giao diện người dùng có thể kỳ lạVí dụ: để phát hiện khi các bản âm thanh được thêm vào hoặc xóa khỏi phần tử 6, bạn có thể sử dụng mã như thế này
Mã này theo dõi các bản âm thanh được thêm vào và xóa khỏi phần tử và gọi một chức năng giả định trên trình chỉnh sửa bản nhạc để đăng ký và xóa bản nhạc khỏi danh sách các bản nhạc có sẵn của trình chỉnh sửa Bạn cũng có thể sử dụng 11 để lắng nghe các sự kiện 85 và 86ví dụsử dụng cơ bảnVí dụ sau đây cho thấy cách sử dụng đơn giản phần tử 6 để phát tệp OGG. Nó sẽ tự động phát do thuộc tính 5—nếu trang có quyền làm như vậy—và cũng bao gồm nội dung dự phòngPlay Audio2 Để biết chi tiết về thời điểm tự động phát hoạt động, cách xin phép sử dụng tự động phát cũng như cách thức và thời điểm thích hợp để sử dụng tự động phát, hãy xem hướng dẫn tự động phát của chúng tôi element with elementVí dụ này chỉ định đoạn âm thanh nào sẽ nhúng bằng cách sử dụng thuộc tính 7 trên phần tử 8 lồng nhau thay vì trực tiếp trên phần tử 6. Luôn luôn hữu ích khi bao gồm loại MIME của tệp bên trong thuộc tính 19, vì trình duyệt có thể biết ngay liệu nó có thể phát tệp đó hay không và không lãng phí thời gian nếu không.Play Audio Pause Audio2 với nhiều phần tửVí dụ này bao gồm nhiều phần tử 8. Trình duyệt cố tải phần tử nguồn đầu tiên (Opus) nếu nó có thể phát nó; 1Mối quan tâm về khả năng tiếp cậnÂm thanh có hộp thoại bằng giọng nói phải cung cấp cả phụ đề và bản ghi mô tả chính xác nội dung của nó. Phụ đề, được chỉ định bằng WebVTT, cho phép những người bị mất thính lực hiểu nội dung của bản ghi âm khi bản ghi đang được phát, trong khi bản ghi cho phép những người cần thêm thời gian có thể xem lại nội dung của bản ghi với tốc độ và định dạng phù hợp Nếu dịch vụ phụ đề tự động được sử dụng, điều quan trọng là phải xem lại nội dung được tạo để đảm bảo nội dung đó thể hiện chính xác âm thanh nguồn Phần tử 6 không hỗ trợ trực tiếp WebVTT. Bạn sẽ phải tìm một thư viện hoặc khung cung cấp khả năng cho bạn hoặc tự viết mã để hiển thị phụ đề. Một tùy chọn là phát âm thanh của bạn bằng phần tử 70, hỗ trợ WebVTTNgoài hộp thoại được nói, phụ đề và bản chép lời cũng phải xác định hiệu ứng âm nhạc và âm thanh để truyền đạt thông tin quan trọng. Điều này bao gồm cảm xúc và giai điệu. Ví dụ: trong WebVTT bên dưới, hãy lưu ý việc sử dụng dấu ngoặc vuông để cung cấp thông tin chi tiết về giọng điệu và cảm xúc cho người xem; 9Ngoài ra, bạn nên cung cấp một số nội dung (chẳng hạn như liên kết tải xuống trực tiếp) dưới dạng dự phòng cho những người xem sử dụng trình duyệt không hỗ trợ phần tử 6 |