Thêm nhạc nền tự chạy cho website WordPress, Blogspot cực đơn giản

Nhung nhac tu chay vao WordPress, Blogspot - anh minh hoa

Nhung nhac tu chay vao WordPress, Blogspot – anh minh hoa

Hôm nay Hocban.vn chia sẻ đến mọi người cách thêm (chèn) nhạc nền (định dạng mp3) vào website WordPress, Blogspot để khi Tết, Giáng Sinh (Noel) lại cần. Cách làm cực kỳ đơn giản luôn.

Cái trò này để làm chi ta ?

Ai hỏi thì các bạn cứ nói “mình thích thì mình làm thôi :v ” haha ! Hề hề, nói vậy chứ cái này xài phải cân nhắc vì:

Cái hay: vào những ngày lễ tình cmn nhân, sinh nhật bạn gái, dợ, hay là một ngày lễ gì đó đặc biệt trong năm bạn chèn nhạc vào để hứng khởi và thay đổi không khí :v

Cái dở: nó có thể gây khó chịu khi người truy cập không muốn nghe nhạc hoặc không thích bài hát của bạn, và nó cũng không có chỗ tắt, mở tab mới mà vẫn là web của bạn thì nó hát bè, cái trước cái sau … không nghe được :v >> nên dùng cho landing page thì oke con dê luôn 😀

Cách thêm (chèn) nhạc nền tự chạy vào WordPress

Để làm các bạn chỉ cần copy đoạn code sau và đem dán vào file header.php hoặc footer.php là được nhé !

<audio autoplay >
  <source src="https://s3.amazonaws.com/Syntaxxx/bigger-picture.mp3" type="audio/mpeg">
</audio>

Ở đây mình sẽ dán nó vào phần footer, cụ thể là trong file footer.php và đặt nó gần cuối file, cụ thể hơn nữa là nó trên thẻ đóng </body> như hình dưới đây:

chen nhac nen mp3 vao trong file footer cua WordPress

Chèn nhạc nền mp3 vào trong file footer của WordPress

Các bạn có thể thay thế đường dẫn file .mp3 bằng đường dẫn bài hát mà bạn úp lên chẳng hạn như:

https://hocban.vn/wp-content/uploads/2017/07/ten-bai-hat.mp3

Một mẫu code cũng khá ngắn gọn, ngắn hơn cái trên luôn, các bạn chèn vào nó cũng hát được và có thể lặp lại.

<audio src="https://s3.amazonaws.com/Syntaxxx/bigger-picture.mp3" autoplay loop>
</audio>

Nếu bạn muốn chèn nó vào một page hay posts nào đó thích và chỉ khi vào page đó nó mới hát nhạc thì bạn chèn nó ngay vào bài viết (phía dưới cùng) trong chế độ soạn thảo HTML CSS.

Đấy, rất đơn giản đúng không nào ? Anh em nào làm được rồi hoặc đang chơi trò này comment link web bên dưới xem nhé ! Có chơi mới dán, ko chơi không dán SPAM nhé !

Cách thêm nhạc nền tự chạy vào Blogspot

Trên Blogspot thì khá đơn giản, anh em thêm một tiện ích HTML/Javascript, sau đó dán đoạn code này vào và lưu lại.

<audio autoplay='true' src='https://s3.amazonaws.com/Syntaxxx/bigger-picture.mp3'/>

Vẫn như thường lệ, nếu có gì thắc mắc hoặc góp ý về thủ thuật này, anh em có thể côm mềnh bên dưới nhé :v

Mẹo liên quan

guest
62 Comments
Inline Feedbacks
View all comments
van thanh <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #2196f3;">) </span>
Guest
van thanh (1)

Trang Chủ – VanlucLand.com các bạn vào nghe thử giups mình nha

Huy <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">3</span><span style="color: #2196f3;">) </span>
Guest
Huy (3)
Đã trả lời  van thanh (1)

Máy mình ko thấy autoplay

Huy <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">3</span><span style="color: #2196f3;">) </span>
Guest
Huy (3)

Không có tác dụng gì trên oppo f3

Huy <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">3</span><span style="color: #2196f3;">) </span>
Guest
Huy (3)
Đã trả lời  Tịnh Nguyễn (2,807)

theo mình nghĩ tùy bản trình duyệt, trình duyệt mặc định, bản benta turbo vv… và các bản có chỉnh sửa giản lược thêm bớt tính năng hay phiên bản cũ ko chạy. . mình test các trình duyệt pb mới chỉ duy nhất một cái autoplay còn lại như chrome, uc, opera côc cốc… thì ko autoplay hoặc một số trình duyệt khi đang load nhấn nhanh bất kỳ vào màn hình thì nó mới chạy, việc để autoplay rất khó hoặc do load yếu, lag… Mình load trang của bạn 100 lần mới vô tình thấy có một… Read more »

Last edited 15 days ago by Huy
Dorothy <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #2196f3;">) </span>
Guest
Dorothy (1)

B ơi mình xài code này nè
<audio src=”https://s3.amazonaws.com/Syntaxxx/bigger-picture.mp3″ autoplay loop>
</audio>
Còn đây là link nhạc mình muốn chèn vào: https://rainymood.com/
Nhưng mình chèn xong nó hổng có chạy… B xem giúp mình với được không?
Mình đang xài WordPress trên điện thoại. Cảm ơn admin nhiều 🥺

tuan <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #2196f3;">) </span>
Guest
tuan (2)

có trang nào có sẵn những bài nhạc để chép link không nhỉ?

123hoi <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #2196f3;">) </span>
Guest

Đang yên đang lành, vào site bác giật hết cả mình vội cho volume về 0 gấp 🙁

Đạt Trịnh <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #2196f3;">) </span>
Guest
Đạt Trịnh (1)

làm sao để tạo được links mp3. mình chỉ có 1 đoạn ghi âm trong máy có tạo được không

tiktok <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #2196f3;">) </span>
Guest

google nó cấm tự động phát từ 2018 rồi các pro. ! số trình duyệt cũ vẫn phát dc

Long <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #2196f3;">) </span>
Guest

sao trên mobile nó ko nghe nhạc được vậy bạn

IT VBA <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #2196f3;">) </span>
Guest
IT VBA (1)

Em đọc bài viết và các câu trả lời độc giả của bác thì thấy bác không phải là dân lập trình chuyên về code, bác copy code để dùng thôi thì phải.

Thế <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">4</span><span style="color: #2196f3;">) </span>
Guest
Thế (4)

Trình duyệt Cốc Cốc và Google Chrome, không tự động phát đc. Trên Microsoft Edge thì lại tự động phát được. Fix lỗi này sao v bạn, tks!

Thế <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">4</span><span style="color: #2196f3;">) </span>
Guest
Thế (4)
Đã trả lời  Tịnh Nguyễn (2,807)

Mình làm trên LadiPage

Thế <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">4</span><span style="color: #2196f3;">) </span>
Guest
Thế (4)
Đã trả lời  Tịnh Nguyễn (2,807)

HTML nhé, mình chèn vào thẻ <body>, đây là link demo của mình: https://bothan.site/demo/

Thế <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">4</span><span style="color: #2196f3;">) </span>
Guest
Thế (4)
Đã trả lời  Tịnh Nguyễn (2,807)

bạn sử dụng trình duyệt nào v, mình sử dụng cốc cốc và gg chrome ko auto nghe đc @@

Hoàng Minh <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #2196f3;">) </span>
Guest
Hoàng Minh (1)

Em gián vào html/JavaScript rồi ko thấy có nhạc

thaidz <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #2196f3;">) </span>
Guest

blogger không đc

Khánh Nhật <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #2196f3;">) </span>
Guest
Khánh Nhật (1)

Có cách nào mà không phải click vào 1 cái thì nó bắt đầu mới phát không anh

Đinh Duân <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #2196f3;">) </span>
Guest

mình chèn nhạc nhưng mà phải click vào 1 cái gì đó thì nó bắt đầu mới phát thì sao hả bạn

Hoang Pham <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #2196f3;">) </span>
Guest
Đã trả lời  Tịnh Nguyễn (2,807)

E cx muốn chèn nhạc nhưng phải đụng vào nút nó ms phát ạ, chỉ e vs ad

Nguyễn Trung <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #2196f3;">) </span>
Guest

copy đoan mã vào rồi ra trang chủ chỉ có máy tính của tôi nghe dc là bị sao vậy ad ơi . qua máy tính khác vào trang ko nghe dc

be_hoi <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #2196f3;">) </span>
Guest
be_hoi (1)

ad ơi em do không đăng ký tài khoản business trên wordpress mà chỉ là mục dích học tập e có copy cái code cuối cùng và quăng vô HTML custom thì nó có chạy
Nhưng khi em thay đổi link bài nhạc thì nó lại im lỉm không chạy dc là sao vậy ạ

Cường <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #2196f3;">) </span>
Guest

Mình muốn cài bài khác thì sao ad

Trần Dương <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">30</span><span style="color: #2196f3;">) </span>
Guest

Thấy cũng tếu nhỉ. Hihi

Truyenhot.vn <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">164</span><span style="color: #2196f3;">) </span>
Thành viên

Mình cứ nghĩ đến trường hợp chèn đoạn nhạc thật hay đoạn đầu và chèn khúc sau 1 đoạn nhạc ” thật kích thích” thì sao nhỉ

Hưng <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #2196f3;">) </span>
Guest
Hưng (1)

Chào admin. Hiện nay em muốn chèn nhạc trên Opencart thì sao ạ?

CuộcSống S <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">12</span><span style="color: #2196f3;">) </span>
Guest

Hay đó bác! Áp dụng cái này cài bài nhạc tết chơi cho web cũng hay đó. Cám ơn bác nhé!

TrungAZ <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">3</span><span style="color: #2196f3;">) </span>
Guest

Này nên dùng cho mấy site truyện tranh kinh dị, chèn nhạc vào chắc phê hơn khi đọc =))

Lại Đình Cường <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">117</span><span style="color: #2196f3;">) </span>
Guest

Vậy hả, tưởng bạn ở Buôn Ma Thuột chớ ^^

Lại Đình Cường <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">117</span><span style="color: #2196f3;">) </span>
Guest

Haha, tự tin là tốt :D, có thời gian ghé blog mình chơi nhé.

Lại Đình Cường <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">117</span><span style="color: #2196f3;">) </span>
Guest

Tại mình cũng có quen một bạn tên Tịnh trên BMT, mà lâu quá không gặp, tưởng blog của bạn đó, nhầm lẫn một chút ^^

Nhưng sao bạn không sửa giao diện trang web cho dễ nhìn hơn, thật sự hơi khó đọc.

Lại Đình Cường <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">117</span><span style="color: #2196f3;">) </span>
Guest

Có vẻ như mình quen biết với chủ blog này nhỉ? Nhìn tên hơi quen 😀