Có thể tạo kiểu cho thẻ âm thanh html5 không?

Tôi không tìm thấy bất kỳ tài nguyên nào về cách làm điều đó. Một cái gì đó đơn giản như thay đổi màu sắc của trình phát sẽ rất tuyệt :)

Đúng! Thẻ âm thanh HTML5 có thuộc tính "điều khiển" sử dụng trình phát mặc định của trình duyệt. Bạn có thể tùy chỉnh nó theo ý thích của mình bằng cách không sử dụng các điều khiển của trình duyệt mà sử dụng các điều khiển của riêng bạn và nói chuyện với API âm thanh qua javascript.

May mắn thay, những người khác đã làm điều này. Trình phát yêu thích của tôi lúc này là jPlayer , nó rất dễ tạo kiểu và hoạt động tuyệt vời. Kiểm tra nó ra.

<audio>

audio::-webkit-media-controls-panel

audio::-webkit-media-controls-mute-button

audio::-webkit-media-controls-play-button

audio::-webkit-media-controls-timeline-container

audio::-webkit-media-controls-current-time-display

audio::-webkit-media-controls-time-remaining-display

audio::-webkit-media-controls-timeline

audio::-webkit-media-controls-volume-slider-container

audio::-webkit-media-controls-volume-slider

audio::-webkit-media-controls-seek-back-button

audio::-webkit-media-controls-seek-forward-button

audio::-webkit-media-controls-fullscreen-button

audio::-webkit-media-controls-rewind-button

audio::-webkit-media-controls-return-to-realtime-button

audio::-webkit-media-controls-toggle-closed-captions-button

THAM KHẢO: https://chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive=0%2F%2F%2F

Có: bạn có thể ẩn giao diện người dùng trình duyệt tích hợp (bằng cách xóa controlsthuộc tính khỏi audio) và thay vào đó, xây dựng giao diện của riêng bạn và kiểm soát phát lại bằng Javascript ( nguồn ):

<audio id="player" src="vincent.mp3"></audio>
<div> 
  <button onclick="document.getElementById('player').play()">Play</button> 
  <button onclick="document.getElementById('player').pause()">Pause</button> 
  <button onclick="document.getElementById('player').volume += 0.1">Vol +</button> 
  <button onclick="document.getElementById('player').volume -= 0.1">Vol -</button> 
</div>

Sau đó, bạn có thể tạo kiểu các phần tử theo cách bạn muốn bằng cách sử dụng CSS.

Tham chiếu API MDN HTMLAudioElement

Sự xuất hiện của thẻ phụ thuộc vào trình duyệt, nhưng bạn có thể ẩn thẻ, xây dựng giao diện của riêng mình và kiểm soát việc phát lại bằng Javascript.

một số điều chỉnh màu sắc

audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 200px;
    height: 25px;
}

Bạn phải tạo trình phát của riêng mình giao diện với phần tử âm thanh HTML5. Hướng dẫn này sẽ giúp http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/

Ken cũng đã đúng như vậy.

một cssthẻ:

audio {

}

sẽ giúp bạn có được một số kết quả. Có vẻ như nó không muốn trình phát bất kỳ chiều cao nào trên hoặc dưới 25px nhưng chiều rộng có thể được rút ngắn hoặc dài ra ở một mức độ nào đó.

điều này đã đủ tốt cho tôi; xem ví dụ này (cảnh báo, âm thanh phát tự động): www.thenewyorkerdeliinc.com

Để chỉ thay đổi màu sắc của trình phát, chỉ cần giải quyết thẻ âm thanh trong tệp css của bạn, chẳng hạn như trên một trong các trang web của tôi, trình phát đã ẩn (màu trắng trên nền trắng), vì vậy tôi đã thêm:

audio {
    background-color: #95B9C7;
}

Điều này đã thay đổi trình phát thành màu xanh lam nhạt.

Có, có thể, từ câu trả lời của @ Fábio Zangirolami

audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
                background-color: red;
}

Nếu bạn muốn tạo kiểu cho trình phát nhạc chuẩn của trình duyệt trong CSS:

audio {
    enter code here;
}