Chèn âm thanh vào Blogger bằng HTML5

Mới đây có bạn +truong linh có hỏi mình làm thế nào để chèn mp3 vào blog mà không sử dụng host phụ. Câu trả lời ở đây rất đơn giản, không thích xài host thì mình nghĩ ngay đến một bác đó chính là "Lưu trữ file trên Google Drive" trước hết thì cứ đẩy hết file mp3 cần thiết lên đây và lấy link theo hướng dẫn trong bài đó nhé, còn cách thức để mà bấm vào nút nào đó hoặc hình ảnh nào đó để nó chạy thì mời các bạn cùng làm theo hướng dẫn sau đây của mình nhé.



Chèn âm thanh vào Blogger bằng HTML5

Hiện tại bây giờ khi nhắc đến bất kì thứ gì liên quan đến video và âm thanh thì thứ mà mình nghĩ đến đầu tiên đó không là gì khác là HTML5. Bây giờ với sức mạnh của HTML5 mặc định bạn có thể làm rất nhiều thứ mà bạn muốn.

Để chèn một đoạn âm thanh đơn giản bằng HTML5 bạn chỉ cần chèn đoạn mã sau đây vào bài viết hoặc trang nào đó mà bạn muốn

<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>

không chỉ mp3 không đâu nhé mà còn 2 định dạng khác nữa bạn có thể thử

Định dạng	Type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

và đây là ví dụ dành cho đoạn mã trên

nhạc hay quá nhỉ :D. Đây là kiểu mặc định của HTML5, còn nếu bạn muốn nó không hiển thị như vầy mà thay thế bằng nút hay hình ảnh khác thì làm theo như sau nhé.

Bạn chèn đoạn mã trên vào vị trí bất kì trong bài viết của bạn, nhưng mà bạn xóa thuộc tính "controls" đi, như vậy thì nó sẽ không hiện lên cái giao diện điều khiển. Như vậy để nó chạy âm thanh thì làm sao? bạn chèn đoạn mã sau đây vào chỗ mà bạn muốn người dùng bấm vào để chạy nhạc.

<button onclick="document.getElementsByTagName('audio')[0].play();">Nghe nhạc</button>

và đây là ví dụ

thật đơn giản phải không nào, bạn có thể thay bằng bất cứ thẻ hình ảnh hoặc bất cứ thể nào bằng HTML và CSS rồi trang trí sao cũng được, chỉ cần giữ lại thuộc tính

onclick="document.getElementsByTagName('audio')[0].play();"

là mọi thứ sẽ diễn ra như bình thường. Ví dụ

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREKM54ho1eLic4PZkR9_HyYtUtbBw1HGI_y55j6_WeZY01p4T9Rg" width="50" height="50" onclick="document.getElementsByTagName('audio')[0].play();">

mình hướng dẫn tới đây thôi còn đẹp xấu như thế nào do các bạn cả nhé.

Lời kết

Với sức mạnh của HTML5 thì bạn hầu như có thể làm được rất nhiều việc mà không cần sử dụng thêm những thứ lỉnh kỉnh khác nhiều để làm nặng thêm website của mình. Mong rằng qua thủ thuật này các bạn có thể áp dụng nó cho một số việc mà các bạn muốn trên website/blog của chính mình nhé. Mọi thắc mắc thêm cứ để lại nhận xét ở dưới cho mình.

P/S: Rất cảm ơn nhiều độc giả đã gửi nhiều câu hỏi và ý tưởng về cho mình, có thời gian mình sẽ cố gắng giải đáp tất cả một cách nhanh gọn nhất, do đó hãy cố gắng chờ mình nhé :)