Chia sẻ code HTML5 nhạc nền cho Blogger với nút bấm Bật/Tắt

Chắc hẳn khi đang xem bài viết này, bạn cũng không biết nhạc đang phát ra từ đâu. Thực ra, ý tưởng làm một bài nhạc nền cho blog đã có từ rất lâu, nhất là thời kì thịnh vượng của Blog Yahoo! 360 với bao chàng trai, cô gái thuở 8x, 9x chỉ biết khẳng định mình trên internet với trang blog cá nhân sống động với bao giao diện đẹp, hiệu ứng lấp lánh, âm nhạc, video...

Mà cái thời đó công nghệ cũng chưa phát triển như bây giờ, chưa có HTML5, và đặc biệt là chưa có CSS3 cộng với những hạn chế nhất định của các nhà cung cấp dịch vụ blog (Blog Yahoo! 360 thì giao diện chia làm 2 phần top - bottom cố định nên muốn thay đổi cho khác biệt cũng không được, Blog Opera với Blogger thì cho tùy biến nhiều hơn nhưng khổ nỗi các nhà cung cấp dịch vụ mạng (Viettel, VNPT...) thời đó chặn không cho truy cập...) nên thật sự muốn làm một trang blog đẹp, đúng ý mình thì thật là khó; mà với một đứa chẳng được đào tạo qua trường lớp nào về công nghệ thông tin như mình thì lại càng khó khăn hơn; nên biết bao thủ thuật hay được các anh/chị, các bạn cùng trang lứa thời đó chia sẻ... mình càng học hỏi nhiều... mình lại càng đam mê... và cái niềm đam mê đối với blog của mình cũng vì vậy... trang tanduy123.blogspot.com đến nay vẫn còn tồn tại...

Đôi dòng tâm sự cũng nhiều, vì các bạn trẻ ngày hôm nay để khẳng định bản thân mình trên internet thì đã có mạng xã hội Facebook, Zalo... hỗ trợ cực kỳ đắc lực rồi... nên mình không biết bài đăng chia sẻ code HTML5 nhạc nền cho Blogger với nút bấm Bật/Tắt này không biết bao nhiêu bạn sẽ áp dụng...

Thì cũng đơn giản thôi, trong Blogger bạn tạo một tiện ích HTML/Javascript và thêm vào đoạn code sau rồi lưu lại:

<script type="text/javascript">

function playpause() { var snd = document.getElementById("sound"); var snd_btn = document.getElementById("sound_button"); snd.muted = !snd.muted; if(snd.muted){ snd_btn.innerHTML = "<img title='Đã tắt nhạc nền' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIqycB54-3jc-HBxit2OfA2jPO7bMmaEfbJWwEDh9Ktz-CPIEuaOuuC5RDHxRdC3IAqYrdlD69155CBUE4lL2sT9gS8Oo9laNN_ebPXPDGR71va41-nKyhxAq_bzSleQTkFre7TX7zrJc/s1600/button_music_off.png' />"; } else{ snd_btn.innerHTML = "<img title='Đang phát nhạc nền' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHlT3trlxTxoElcs8k22q6eq_XFkDofYwnilTlD14betA4CYZ-UjW4mjM4kfrOuvqvkvALSP2KCSOtK9_xsmUP30FBj6_nYWlTWAgo5G6TgXPw9-M6qHVo5gptZRJCp_qkJOXzw-a6iiA/s1600/button_music_on.png' />"; } }

</script>

<audio autoplay="true" loop="true" width="0" height="0" id="sound" src="https://dl.dropboxusercontent.com/s/2eb33hp5gitmqty/SadAngel.mp3" type="audio/mp3" ></audio>

<div id='sound_button' onClick="playpause()" ><img title='Đang phát nhạc nền' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHlT3trlxTxoElcs8k22q6eq_XFkDofYwnilTlD14betA4CYZ-UjW4mjM4kfrOuvqvkvALSP2KCSOtK9_xsmUP30FBj6_nYWlTWAgo5G6TgXPw9-M6qHVo5gptZRJCp_qkJOXzw-a6iiA/s1600/button_music_on.png' /></div>

Trong đó:

Bạn thay thế bài hát bạn cần làm nhạc nền cho trang blog của mình theo đoạn mình bôi vàng cho phù hợp.

Và nhân vật phát bài hát nãy giờ là đây, vì giao diện của blog mình màu đen, nên bạn sẽ hơi khó thấy nút bấm mở/tắt nhạc nền nhé:

Chúc bạn một ngày vui vẻ!