Tự làm một Audio Player HTML5 với wavesurfer.js

Mới rồi thử mày mò chèn một cái MP3 vào sidebar cho trang wordpress. Researching một hồi lâu trên mạng thì có nhiều giải pháp như: Embed code từ một dịch vụ chia sẻ nhạc như NCT, Zing MP3, SoundCloud…

Hiện tại thì tôi đang dùng SoundCloud cho trang wordpress của mình (“updated on 20 Sep, 2017”). Sử dụng SoundCloud thấy khá ok, chỉ mỗi cái là bản thân tôi và rất nhiều người dùng SoundCloud gặp phải chút khó khăn với cách hiển thị của SoundCloud, đặt biệt là khi truy cập website trên thiết bị di động, SoundCloud hiển thị một cái element to đùng “Play on SoundCloud”… Thế là tôi lại suy nghĩ và mày mò tìm hiểu tự làm một cái Audio Player.

Sau khi tham khảo nhiều trang hướng dẫn và cũng thử qua nhiều giải pháp, tôi đang tạm dừng chân với mã nguồn wavesurfer.js – vì tính tiện lợi, dễ ứng dụng (đặt biệt với những ai không chuyên coding như tôi…). Bên dưới này là showcase của tôi, và resource link để mọi người tham khảo.

My showcase: Rawgit demo link, Github source link

https://codepen.io/trongnghia203/pen/qPZVGQ/
Codepen Preview

P/s: thời điểm cập nhật hiện tại của bài viết này, tôi vẫn đang sử dụng SoundCloud cho sidebar widget của tôi.

RELATED POSTS

AttributeError: module ‘yaml’ has no attribute ‘FullLoader’

Issue found: Solution:Reference: https://stackoverflow.com/questions/55551191/module-yaml-has-no-attribute-fullloader The FullLoader class is only available in PyYAML 5.1 and later. Version 5.1 was released on March 13, 2019 and has probably not filtered down to many distributions yet. You can check the version of PyYAML by inspecting yaml.__version__: If you

Read More »
Share the Post: