Thay đổi css thẻ audio

Question

Mình muốn thay đổi css mặc định thẻ audio như hình dưới thì phải css thuộc tính gì ạ? Cảm ơn đã giúp đỡ

Accepted Answer

@hieuhumg Nếu dùng thẻ audio đơn thuần như kia thôi thì khó mà có giao diện như bạn mong muốn. Bạn cần build lại một cái audio player khác bằng tạo UI bằng HTML/CSS như bình thường, sau đó gọi các JavaScript API để play/pause... khi click vào các element tương ứng. Với thẻ audio thì tùy vào browser bạn dùng là gì mà UI lại khác nhau nên hầu hết các website như Zing MP3, Nhaccuatui, SoundCloud... đều tự build player riêng.

Hoặc bạn có thể sử dụng những player đã được build sẵn mà vẫn cho phép bạn customize lại giao diện, như vậy sẽ đỡn tốn công hơn là phải build từ đầu. Một số player khá đẹp mà mình tìm được như:
- https://catswhocode.com/html5-audio-player/
- https://playerjs.com/
- https://plyr.io/#audio
- http://kolber.github.io/audiojs/
- ...

Bạn tham khảo nhé.

1 ANSWERS