Chèn nhạc trực tiếp từ host vào blogspot bằng HTML5

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 (Hay nói chung là các host directlink) 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 "controls" đ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ả:

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é :))

Bài viết liên quan:

• Tạo Email domain Yandex phần 2
• Tạo Email tên miền riêng miễn phí với Yandex
• Tăng tốc iphone 3Gs, iphone 4 chạy iOS6
• Cách khắc phục lỗi Google Chrome không update được
• Sửa lỗi HRESULT 0xc8000222 khi cài .Net 4

Chia sẻ lên mạng xã hội | Về trang chủ | Tên miền | Tải máy ảo | Thủ thuật | SEO