Chèn Nhạc Trực Tiếp Từ Host Vào Blogspot Bằng HTML5 - DUONGNGO

Có thể bạn quan tâm

≡

Home
Search
SEO
Tên Miền
Vmware Image
Download
hài bựa

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

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

On Thứ Ba, 9 tháng 6, 2015 Người đăng: The Duong Nhãn: ThuThuat

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 nhạc tự host vào blogspot bằng HTML5

Chèn nhạc tự host vào blogspot bằng 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. Chèn trực tiếp nhạc vào blogspot với HTML5

Chèn trực tiếp nhạc vào blogspot với HTML5

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ả: Nghe nhạc nhé 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:

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

Chèn nhạc trực tiếp từ host vào blogspot bằng HTML5 4.5 5 The Duong Thứ Ba, 9 tháng 6, 2015 Hướng dẫn 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 ... Người đăng: The Duong vào lúc 15:09 Nhãn: ThuThuat

12 nhận xét :

NADlúc 19:38 10 tháng 6, 2015
Đag định dùng video làm background blog :d
Trả lờiXóaTrả lời
1. The Duonglúc 09:46 12 tháng 6, 2015
  Dùng nhạc nền thôi, chứ video backgroud thì khác gì blog yahoo 360 ngày xưa, nhìn quê mùa chết :)
  XóaTrả lời
2. NADlúc 12:19 12 tháng 6, 2015
  Mình nhớ ng xưa Y!blog có video bg đâu nhỉ :dMà video bg full width đag là mốt mới khoảng 1 2 năm nay mà, xem ở awwwards.com í
  XóaTrả lời
Administratorslúc 20:07 18 tháng 1, 2016
chèn 1 danh sách theo kiểu này thì như nào vậy bạn
Trả lờiXóaTrả lời
Louislúc 11:54 3 tháng 5, 2017
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaTrả lời
Tomorrowlúc 22:31 25 tháng 4, 2018
Có sửa cái button thành hình tròn đc ko Dương?
Trả lờiXóaTrả lời
The Duonglúc 22:39 25 tháng 4, 2018
Hoàn toàn có thể Duy ạ. Chèn hình hoặc FontAwesome vào đó là được mà
Trả lờiXóaTrả lời
The Duonglúc 22:40 25 tháng 4, 2018
Css button :)
Trả lờiXóaTrả lời
Tomorrowlúc 22:42 25 tháng 4, 2018
Tớ làm đc rồi. Nhưng muốn sau khi bấm play thì nó sẽ hiện ra pause có đc ko nhỉ? :D
Trả lờiXóaTrả lời
The Duonglúc 22:45 25 tháng 4, 2018
Vậy thì vẫn phải để thuộc tính controls, sau đó định dạng cái controls ấy sao cho nó ngắn đi, chỉ để mỗi nút "play" thôi :)
Trả lờiXóaTrả lời
Tomorrowlúc 11:22 26 tháng 4, 2018
Nếu chèn 2 đoạn code như trên với 2 link mp3 khác nhau thì khi chạy nó chỉ chạy bài đầu tiên thui. Khắc phục đc ko Dương :(
Trả lờiXóaTrả lời
The Duonglúc 14:40 26 tháng 4, 2018
Duy tải cái này về amazingaudioplayer .com
Trả lờiXóaTrả lời