Hướng dẫn bootstrap audio player

Vietnamese [Tiếng Việt] translation by Thai An [you can also view the original English article]

Rất may, HTML5 đã trở thành chuẩn mực cho thiết kế web đa phương tiện. Đã qua đi những ngày phải đau đầu với Flash và Silverlight, khi HTML5 hỗ trợ audio [âm thanh] và video đã tạo ra một tiêu chuẩn trên tất cả các nền tảng - chưa kể đến lợi ích của SEO và bộ nhớ đệm ngoại tuyến.

Một lợi thế HTML5 khác là dễ dàng trong việc thích ứng với các nền tảng khác nhau. Điều này làm cho việc thiết kế, phát triển và triển khai trình phát âm thanh tùy chỉnh dễ dàng hơn nhiều so với trước đây - và nó hoạt động trên máy tính để bàn, thiết bị di động và các hệ điều hành khác nhau.

15 trình phát âm thanh HTML5 tốt nhất sau đây trên Envato là những ví dụ tuyệt vời về mức độ nâng cao của những người chơi này, đồng thời dễ dàng tùy chỉnh theo nhu cầu thiết kế của riêng bạn.

1. Audio Waveform Player with Playlist

Trình phát dạng sóng âm thanh với danh sách phát là một trong những trình phát âm thanh HTML5 yêu thích của tôi. Nó mượn một số yếu tố thiết kế từ máy nghe nhạc SoundCloud và ném vào một số tính năng bổ sung hữu ích cho những người lưu trữ âm thanh của riêng mình.

Trình phát có thể tùy chỉnh và đáp ứng đầy đủ này cũng bao gồm các tùy chọn hữu ích như:

  • thời gian bắt đầu và kết thúc
  • âm thanh tải về
  • tốc độ phát lại
  • chia sẻ xã hội
  • danh sách phát
  • chú giải công cụ
  • và nhiều hơn nữa

Một giải pháp tuyệt vời cho podcast, ban nhạc và hơn thế nữa, cho âm thanh tự lưu trữ trên Google Drive, Amazon S3 và thậm chí cả SoundCloud.

Với API mạnh mẽ và các cuộc gọi lại có sẵn, bạn sẽ tìm thấy Trình phát âm thanh dạng sóng với Danh sách phát được thiết kế tốt và mạnh mẽ.

2. HTML5 Audio Player with Playlist

Trình phát Âm thanh HTML5 với Danh sách phát là một tùy chọn mạnh mẽ khác.

Với API mạnh mẽ và giao diện người chơi không giới hạn, bạn có thể sử dụng trình phát âm thanh HTML5 này bằng bất kỳ cách nào bạn có thể tưởng tượng.

Các tính năng bao gồm:

  • hỗ trợ danh sách phát XML, HTML hoặc Cơ sở dữ liệu
  • tự động tạo danh sách phát từ thư mục
  • sắp xếp và kéo các mục trong danh sách phát của bạn
  • trộn nhiều danh sách phát / bài hát
  • hỗ trợ nhiều trường hợp
  • Dự phòng flash
  • và nhiều hơn nữa

Ở cả dạng và chức năng, trình phát âm thanh này có nhiều tùy chọn và là trình phát tuyệt vời cho podcast, SoundCloud và hơn thế nữa.

Trình phát âm thanh HTML5 với danh sách phát có thể rất tốt là trình phát âm thanh HTML5 đáp ứng tối đa.

3. MP3 Sticky Player

Điều tuyệt vời nhất về MP3 Sticky Player là nó ... dính!

Trình phát âm thanh HTML mạnh mẽ, đáp ứng và hoàn toàn tùy chỉnh này có thể dễ dàng thêm vào đầu hoặc cuối trang web của bạn và hoạt động hoàn hảo trên tất cả các trình duyệt và thiết bị di động chính.

Một số tính năng quan trọng khác bao gồm:

  • hỗ trợ Google Drive, Amazon S3 và tất cả các dịch vụ và máy chủ cho phép truy cập luồng mp3
  • tải danh sách phát qua XML, HTML, thư mục mp3, podcast, YouTube hoặc SoundCloud
  • cũng hỗ trợ video mp4 và YouTube
  • hỗ trợ danh sách phát hỗn hợp
  • liên kết sâu tùy chọn
  • và nhiều hơn nữa

Bạn sẽ tìm thấy nhiều tùy chọn và sáu giao diện thiết kế khác nhau với các tệp PSD được bao gồm.

MP3 Sticky Player có thể là trình phát âm thanh HTML5 hoàn hảo để gắn trên trang web của bạn.

4. sPlayer - Trình phát nhạc siêu HTML5

Trình phát nhạc sPlayer - Trình phát nhạc siêu HTML5 làm mờ ranh giới giữa trình phát trang web và trình phát âm thanh cho máy tính để bàn:


"SPlayer đang đẩy HTML5 đến giới hạn, gần như chắc chắn là trình phát nhạc HTML5 đầu tiên thuộc loại này, Biến nó thành thư viện âm thanh JavaScript giàu tính năng nhất."

Các tính năng bao gồm:

  • hỗ trợ nhiều danh sách phát
  • đài phát thanh và luồng trực tiếp
  • thể loại nhạc biểu tượng
  • tìm kiếm trực tiếp
  • chia sẻ liên kết

Bạn thậm chí có thể nhập nhạc cục bộ bằng các thẻ ID3 và nhiều hơn thế nữa.

Từ web đến màn hình nền, hỗ trợ di động đầy đủ và một số định dạng âm thanh được hỗ trợ khác nhau [mp3, ogg, oga, aac, m4a và mp4], sPlayer - Super HTML5 Music Player đã sẵn sàng để bạn biến nó thành của riêng bạn.

5. Tất cả trong một Audio và Radio Player

Cho dù bạn muốn phát một bài hát, xây dựng danh sách phát hoặc phát trực tuyến âm thanh, Trình phát tất cả trong một âm thanh và Radio Player đã sẵn sàng phát sóng.

Trình nghe nhạc tốt này hỗ trợ:

  • AAC and AAC+ streaming
  • SoundCloud
  • Shoutcast
  • Icecast
  • Spotify
  • iTunes
  • MP3
  • OGG
  • Wav

Với các chủ đề khác nhau và API mạnh mẽ, bạn có thể tùy chỉnh trình phát âm thanh HTML5 này thành bất kỳ cách nào bạn có thể tưởng tượng.

Một số tính năng bao gồm:

  • thân thiện với mobile và hỗ trợ phím điều khiển
  • ảnh nền và hỗ trợ CSS gradient
  • API mạnh mẽ và tài liệu chi tiết
  • hỗ trợ nhiều trình nghe nhạc cùng lúc trên trang
  • và nhiều nữa

All in One Audio and Radio Player là một chọn lựa ấn tượng cho trình nghe nhạc HTML5.

6. Responsive HTML5 Audio Player PRO With Playlist

Trình phát âm thanh HTML5 đáp ứng PRO với danh sách phát là một lựa chọn vững chắc. Với giao diện hoàn toàn tùy biến, bạn có thể tích hợp trình phát âm thanh này hoàn hảo vào thiết kế trang web của bạn.

Nó cũng có trong phiên bản WordPress.

Một số tính năng hàng đầu của nó bao gồm:

  • tải xuống và tùy chọn ngẫu nhiên
  • chia sẻ truyền thông xã hội
  • danh mục danh sách phát
  • tùy chọn tìm kiếm
  • và hơn thế nữa

Theo dõi một số tính năng theo dõi Google Analytics và thiết lập tạo danh sách phát tự động dựa trên tổ chức thư mục của bạn và bạn sẽ hoàn thành và chạy không mất chút thời gian nào.

Đối với trình phát âm thanh HTML rắn có thể được tùy chỉnh để phù hợp với thiết kế của riêng bạn, hãy xem xét kỹ hơn về Trình phát âm thanh HTML5 đáp ứng với Danh sách phát.

7. ProgressionPlayer - Responsive Audio/Video Player

Nếu bạn cần bao gồm một số video cùng với âm thanh của mình, bạn sẽ muốn sử dụng ProgressionPlayer - Trình phát âm thanh / video đáp ứng. Dễ dàng tùy chỉnh, đáp ứng đầy đủ và bao gồm tất cả các tính năng cơ bản bạn sẽ muốn trong trình phát âm thanh HTML5.

“Trình phát Flash và Silverlight tùy chỉnh bắt chước API HTML5 MediaElement cho các trình duyệt cũ hơn”

Các tính năng bao gồm:

  • các phiên bản trình phát không giới hạn trên mỗi trang
  • bao gồm năm skins
  • danh sách phát âm thanh
  • hỗ trợ võng mạc
  • và hơn thế nữa

ProgressionPlayer - Trình phát âm thanh / video đáp ứng hoàn hảo cho nhiều phiên bản trên cùng một trang, vì người chơi sẽ tự động ngừng phát khi người chơi khác được kích hoạt.

Một phiên bản WordPress cũng đã được tạo sẵn.

8. Single jQuery Audio Player [Music and Radio]

Với thiết kế sạch sẽ và các tính năng độc đáo, Single jQuery Audio Player [Âm nhạc và Radio] là một giải pháp tuyệt vời cho các nghệ sĩ phát trực tiếp và âm nhạc.

Mỗi phiên bản trình phát có thể được thiết lập khác nhau bằng cách sử dụng API plugin hữu ích của nó:

  • tải trực tiếp
  • Âm nhạc của Apple và Amazon
  • chỉnh sửa tiêu đề, tên nghệ sĩ và ảnh nghệ thuật

Một số tính năng hữu ích khác của nó bao gồm:

  • Shoutcast, Icecast, SoundCloud và radio / phát trực tiếp được hỗ trợ
  • hỗ trợ MP3, OGG và WAV
  • tài liệu chi tiết
  • cảm ứng thân thiện
  • và hơn thế nữa

Hay nhất của tất cả, nó sẽ tự động tạm dừng và dừng phát lại khi một người chơi mới được bắt đầu trên cùng một trang.

Với thiết kế tối thiểu và API mạnh mẽ, Single jQuery Audio Player [Nhạc và Radio] là một trong những trình phát âm thanh HTML5 tốt nhất dành cho nhạc sĩ và phát trực tiếp.

9. DS SoundCloud Custom Music Player

Nếu bạn yêu thích SoundCloud, nhưng muốn sử dụng trình phát được cách điệu của riêng bạn, bạn muốn DS SoundCloud Custom Music Player.

“DS SoundCloud Music Player là một plugin jQuery động được thiết kế để cho phép phát trực tuyến âm thanh gốc trên các trang web, sử dụng HTML5 và jQuery. Nó được thiết kế dựa trên công nghệ SoundCloud và có thể được sử dụng để thay thế cho trình phát nhúng SoundCloud. ”

Các tính năng bao gồm:

  • nhẹ, dựa trên đám mây và không có Flash
  • tự động tìm nạp dữ liệu từ SoundCloud
  • Tích hợp Facebook và Twitter
  • hỗ trợ danh sách phát tùy chỉnh
  • và hơn thế nữa

DS SoundCloud Custom Music Player là một giải pháp thay thế khả thi cho trình phát SoundCloud mặc định — với một chút bổ sung được thêm vào.

10. Clean HTML Audio Player with Playlist

Sạch sẽ và đơn giản.

Trình phát âm thanh HTML sạch với danh sách phát chính xác là như vậy.

Tự lưu trữ hoặc phát, trình phát này có thể xử lý.

Một số tính năng khác bao gồm:

  • hỗ trợ danh sách phát và nhiều phiên bản
  • init HTML đơn giản với các thuộc tính dữ liệu
  • hoàn toàn đáp ứng và võng mạc đã sẵn sàng
  • và hơn thế nữa

Trình phát âm thanh HTML sạch với Danh sách phát đơn giản, đơn giản và như tiêu đề cho biết, sạch sẽ.

11. Easy Audio Player

Easy Audio Player là trình phát âm thanh cơ bản, chắc chắn, có thể tùy chỉnh theo sở thích của bạn.

Nó bao gồm hỗ trợ API hoàn chỉnh và được tối ưu hóa cho thiết bị di động.

Các tính năng bổ sung bao gồm:

  • tất cả các nút là tùy chọn, định cấu hình theo ý muốn
  • hoạt ảnh giới thiệu tùy chọn
  • tài liệu chi tiết
  • bốn giao diện với các tệp PSD
  • Dự phòng Adobe Flash
  • và hơn thế nữa

Easy Audio Player dễ cài đặt, dễ sử dụng và dễ dàng lựa chọn.

12. tPlayer - audio player [with playlist] v1.5

Đối với một trình phát âm thanh HTML5 hiện đại, được thiết kế đẹp mắt, trình phát âm thanh tPlayer [với danh sách phát] v1.5 là một trong những lựa chọn hàng đầu của tôi.

Nút SVG độc đáo, hình động, và mặt bìa đàn hồi và thanh trượt tìm kiếm mang lại một số kẹo đẹp mắt cho người chơi sạch này.

Một số tính năng của nó bao gồm:

  • chia sẻ xã hội cho Facebook, Twitter, Google+ và Tumblr
  • chế độ nhỏ gọn và ẩn danh sách phát để có giao diện rõ ràng hơn
  • bao gồm các liên kết mua hoặc tải xuống
  • chế độ chơi đơn và danh sách phát
  • thay đổi cách phối màu
  • và nhiều hơn nữa

tPlayer - trình phát âm thanh [có danh sách phát] v1.5 là trình phát tìm kiếm tuyệt vời và cũng có sẵn trong WordPress.

13. ZoomSounds - Neat HTML5 Audio Player

ZoomSounds - Geat HTML5 Audio Player là một cầu thủ bán chạy hàng đầu vì lý do chính đáng.

Với thiết kế của nó nghiêng về phía SoundCloud, nó cung cấp một số phong cách khác nhau và da mà làm cho nó dễ dàng để thiết kế máy nghe nhạc của bạn tuy nhiên bạn thích.

Các tính năng bao gồm:

  • Thân thiện với SEO
  • chạm tối ưu
  • phát trực tuyến âm thanh trên YouTube
  • hoàn toàn đáp ứng với bản sao lưu Adobe Flash
  • hỗ trợ các luồng SoundCloud với khóa API
  • và nhiều hơn nữa

Với ZoomSounds - Trình phát âm thanh HTML5 gọn gàng, âm thanh của bạn chưa bao giờ trông đẹp như vậy.

14. Chameleon HTML5 Audio Player With/Without Playlist

Các Chameleon HTML5 Audio Player Với / Nếu không có Playlist sẽ dễ dàng pha trộn vào trang web của bạn với màu sắc tùy biến của nó và các yếu tố trên màn hình.

Các tính năng bổ sung bao gồm:

  • tạo danh sách phát từ các thư mục có tệp mp3
  • hỗ trợ nhiều phiên bản
  • 35+ tùy chọn JS
  • thân thiện với di động
  • và hơn thế nữa

Bạn có thể sử dụng Trình phát âm thanh HTML5 Chameleon có / không có danh sách phát cho WordPress.

15. Trình phát nhạc HTML5 kiểu HTML5

Là một người yêu thích bản ghi vinyl, Trình phát nhạc theo kiểu HTML5 có thể dễ dàng là một trong những mục yêu thích của tôi từ danh sách này.

Không chỉ bản ghi kéo ra từ tay áo nghệ thuật album, bản ghi quay động hoạt động như một chiếc bánh chà.

Rực rỡ.

Một số tính năng khác mà bạn cũng có thể quan tâm:

  • tạo danh sách phát hoặc chọn chế độ ngẫu nhiên
  • chạm tối ưu và đáp ứng hoàn toàn
  • thay đổi tốc độ, thiết lập lặp lại hoặc ngẫu nhiên
  • tải thẻ và bao gồm tự động
  • và hơn thế nữa

Trình phát nhạc theo kiểu HTML5 của HTML5 dễ dàng là trình phát âm thanh HTML5 tuyệt vời nhất mà bạn sẽ tìm thấy.

Tổng kết

Những trình phát âm thanh HTML5 có hình thức đẹp và chức năng tốt, đa số chúng cho phép tùy biến đầy đủ để phù hợp với nhu cầu thiết kế website của bạn. Nếu bạn đang tìm kiếm một điều khác biệt, bạn có thể cân nhắc thực hiện các thay đổi đối với một trong những audio player đã đề cập trước đó hoặc tự xây dựng từ đầu player c.

Trên Envato Tuts+, bạn sẽ tìm thấy tất cả các loại tài nguyên hữu ích để học HTML5, các hướng dẫn HTML5, code cho eBooks. và khoá học video. Học về What is HTML5? Bắt đầu với Decoding HTML5, và tham gia các khóa học HTML5 nâng cao.

Với bạn tính năng quan trọng nhất của HTML audio player là gì?

Chủ Đề