Mã nhúng nhạc MP3/WAV/OGG mặc định cho Blogger

    Một số bạn có hỏi xin mình mã nhúng nhạc hiện mình đang dùng cho blog của mình. Thật ra cũng chả có gì để dấu, bạn nào rành code HTML5 thì chỉ cần View Source tìm với từ khóa "audio" là thấy thôi. 

   Nhưng mà sẵn đây mình chia sẻ code hiện mình đang dùng luôn. Với giải thích một số thông số tùy chọn dành cho bạn nào mới tập làm quen với HTML5 có để dùng luôn hoặc tùy biến lại tùy bạn.

Code Mẫu:

<center>

  <figure>

    <figcaption><span style="font-size: x-small;"><b>Tên Ca Sĩ hoặc Bài Hát</b></span></figcaption>

     <audio controls autoplay muted loop controlslist="nodownload" id="Volume" > 

        <source src="URL to MP3" type="audio/mpeg"></source>

        Trình duyệt của bạn hiện chưa hỗ trợ tính năng này.

     </audio>

  </figure>

<style>figure {margin: 0;}</style>

 <script> // Code JavaScript giới hạn âm lượng.

   var audio = document.getElementById("Volume");

     audio.volume = 0.5; 

 </script>

</center>(code-box)

Ví Dụ:

Nhạt Phai

Giải Thích:

- Tham số: autoplay="phát tự động", loop="tự động lặp" và muted="tắt tiếng". (1)

- Đường dẫn: src="URL to MP3" thay bằng đường dẫn đến tập tin nhạc MP3 của bạn.

- Tham số: controlslist="nodownload". Hạn chế khách truy cập tải về tập tin nhạc MP3 (2)

- Định dạng: type="audio/mpeg" nếu là MP3, audio/ogg nếu là OGG, audio/wav nếu là WAV

- Âm lượng: audio.volume = 0.5 quy định âm lượng, dao động từ 0.0 đến 1.0. Với 0.5 ứng với 50%

   

 (1) Lưu ý hầu hết các trình duyệt sử dụng nhân Chromium như Chrome, Edge, Brave... đều mặc định tắt tính năng autoplay. Tuy nhiên nếu đi chung 2 tham số là autoplay và muted thì OK. Ngoài ra các bạn có thể tham khảo thêm về HTML5 Audio tại W³ Schools.

 (2) Chỉ là hạn chế phần nào khách truy cập tải trực tiếp tập tin nhạc. Nếu View Source lấy link tải trực tiếp hoặc dùng các phần mềm chuyên download bên thứ 3 như Internet Download Manager để bắt link thì vẫn download được bình thường.

.   

    Đoạn code trên mình chia sẻ chỉ là code mẫu các bạn có thể tùy nghi chỉnh sửa sao cho phù hợp và tối ưu cho blog của bạn. Nếu có thắc mắc hoặc chỗ nào cần góp ý các bạn cứ để lại ý kiến đóng góp bên dưới mình sẽ cố gắng trả lời trong khả năng của mình.