Nhúng MP3/WAV/OGG

(left-sidebar)

   Thử nghiệm nhúng nhạc MP3/WAV/OGG cho blog dùng mã HTML5... 

Code HTML5 mặc định:

<audio controls autoplay muted>

     <source src="URL đến tập tin MP3" type="audio/mpeg">

     <source src="URL đến tập tin WAV" type="audio/wav">

     <source src="URL đến tập tin OGG" type="audio/ogg">

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

</audio>(code-box)

   Trong đó tham số autoplay = phát nhạc tự động và muted = tắt tiếng. 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.

Ví dụ mẫu:

Tự động phát nhạc

<center>

 <audio controls autoplay>

    <source src="https://dohuytuong.com/the-beauty-of-asia-by-serg-maru.mp3" type="audio/mpeg">

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

 </audio>

</center>(code-box)

Không tự động phát nhạc và tắt tiếng

<center>

 <audio controls muted>

    <source src="https://dohuytuong.com/the-beauty-of-asia-by-serg-maru.mp3" type="audio/mpeg">

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

 </audio>

</center>(code-box)

Khóa tính năng "Download"

<center>

 <audio controls controlsList="nodownload">

    <source src="https://dohuytuong.com/the-beauty-of-asia-by-serg-maru.mp3" type="audio/mpeg">

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

 </audio>

</center>(code-box)

Tự động phát nhạc và tắt tiếng

<center>

 <audio controls autoplay muted>

    <source src="https://dohuytuong.com/the-beauty-of-asia-by-serg-maru.mp3" type="audio/mpeg">

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

 </audio>

</center>(code-box)

The Beauty of Asia by Serg Maru

Lỗi của Blogger

   Thỉnh thoảng khi các bạn chuyển đổi qua lại giữa 2 chế độ soạn thảo Blogger sẽ tự động thêm mã thừa (mã lỗi, không đúng cú pháp XHTML) những vẫn hoạt động được nên các bạn không phải lo. Ví dụ với đoạn mã trên Blogger sẽ tự động sửa thành:

Code Lỗi

<center>

  <audio autoplay="" controls="" muted="">

    <source src="https://dohuytuong.com/the-beauty-of-asia-by-serg-maru.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>  

</center>(code-box)

   Các tham số như controls, autoplay, muted sẽ tự động bị sửa thành autoplay="", controls="", muted="" và đặc biệt là thẻ <source> vốn dĩ không có thể đóng thế mà Blogger nó tự thêm </source>. Bó tay. 😕

Code nhúng nhạc mặc định cho Blogger

Code Mẫu

<center>

  <figure>

    <figcaption><span style="font-size: x-small;"><b>Bấm nút Play để phát Nhạc</b></span></figcaption>

     <audio controls="">

         <source src="URL Tập Tin 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>

</center>(code-box)

Anh Xấu Xí Chứ Không Xấu Xa

* Cập nhật Code Mẫu thêm tính năng giới hạn Âm Lượng

Code Mẫu:

<center>

  <figure>

    <figcaption><span style="font-size: x-small;"><b>Bấm nút Play để phát Nhạc</b></span></figcaption>

     <audio controls="" id="Volume">

         <source src="URL Tập Tin 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)

   Thay đổi Âm Lượng (audio.volume = 0.5;) từ 0.1 đến 0.9 ứng với 10% đến 90% Âm Lượng.

Dư Âm Tình Ta

   Code này tạm thời "ổn rồi" có thể dùng nhưng tùy theo giao diện và chỉnh lại cho phù hợp với giao diện của blog hơn...

---

[ Cập nhật và sửa lỗi lần cuối Aug 07, 2023 ]