Cách Chèn Nhạc MP3 Cho Blogpost

Để chèn một file nhạc vào trong bài viết thì theo các bước sau:

1- Vào Blogspot ở chế độ soạn thảo bấm cây bút chì chọn soạn thảo bằng HTML view
2- Tìm code embed trong Google Drive để nhúng vào.
Sau khi tải file nhạc mp3 lên Google driver thì copy link share. 

Ví dụ: đoạn code sau khi copy có dạng:

https://drive.google.com/file/d/1gz0dQwovl8JP6-sJMdJoACt0IcJDZncN/view?usp=share_link

ta chỉ lấy phần: https://drive.google.com/file/d/1gz0dQwovl8JP6-sJMdJoACt0IcJDZncN và bỏ phần "view?usp=share_link" rồi dán lại trình duyệt. 

Sau đó vào dấu 3 chấm góc phải màn hình, chọn Embed như chỉ dẫn:

 

Bạn sẽ được đoạn code như hình sau 

Trong Google drive file nhạc của bạn có mục cho embed và copy tất cả trong ô vào trang blog mục soạn thảo HTML dán vào publish thôi.

3- Tiếp theo là code đưa vào blogpost, chỉnh độ rộng, cao của phần mềm chơi nhạc cho phù hợp và Publish là xong.

Ngoài ra còn có cách chèn nhạc bằng Html như sau:

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">
</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.