Code audio cho blog
Làm thế nào để chèn trực tiếp mp3 vào blogspot (blogger) mà không sử dụng trình nhúng của các trang âm nhạc. hôm nay mình sẽ hướng dẫn các bạn cách đưa nhạc mp3 lưu trữ trên Google Driver hay Google Site vào Blogspot cực kỳ đơn giản với HTML5
Chèn trực tiếp nhạc vào blogspot với HTML5
Hãy chèn đoạn mã sau đây vào vị trí trên trang hay bài viết mà bạn muốn có trình chơi nhạc
<audio controls>
<source src="địa-chi-link-âm-thanh.mp3" type="audio/mpeg">
Trình duyệt của bạn không hỗ trợ thẻ audio, vui lòng cập nhật lên phiên bản mới nhất hoặc đổi trình duyệt.
</audio>
Hỗ trợ các định dạng sau:
| Định dạng | Type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
Và đây là ví dụ:
Còn bây giờ, trường hợp bạn không muốn hiện trình phát nhạc lên mà chỉ muốn có 1 cái nút, người dùng bấm vào đó là nghe được âm thanh thì làm như sau:
Bạn vẫn thực hiện như trên để chèn trình phát nhạc vào bất cứ vị trí nào của bài viết, sau đó ta sẽ ẩn nó đi bằng cách xóa thuộc tính “control” đi, như thế nó sẽ không hiện lên trình điều khiển nữa.
Giờ ta tạo một nút bấm cho người đọc click vào đó nghe nhạc, bạn chèn đoạn mã sau đây vào chỗ mà bạn muốn nút bấm đó hiển thị nhé:
<button onclick="document.getElementsByTagName('audio')[0].play();">Nghe nhạc nhé</button>
Và đây là kết quả:
Nghe nhạc nhé
Hay bạn cũng có thể trang trí cho nút bấm đó kiểu cách một chút ví dụ như:
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREKM54ho1eLic4PZkR9_HyYtUtbBw1HGI_y55j6_WeZY01p4T9Rg" width="50" height="50" onclick="document.getElementsByTagName('audio')[0].play();">
Sẽ được:
Kết luận:
Với sức mạnh của HTML5 thì bạn có thể thực hiện hầu hết các tác vụ media trên blog của mình, hinh vọng với chia sẻ này bạn đã có thêm một cách để Chèn nhạc trực tiếp từ host vào blogspot bằng HTML5. Mọi thắc mắc hãy để lại ở phần bình luận, mình sẽ giải đáp nhé :))
Thêm:
Trường hợp muốn bấm trực tiếp vào chữ để nghe âm thành phát ra thay vì công cụ thì làm như code bên dưới.
<audio id="Tên ID" src="link nhac.mp3"></audio>
"<a class="sm2_link" href="#" onclick="document.getElementById('Tên ID').play()" style="color: #0000ee; line-height: 26px; text-decoration: none;">nội dung cần hiển thị.</a>"<br />
code này dùng cho trường hợp có nhiều link audio trong một trang.