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

 On Thứ Ba, 9 tháng 6, 2015  

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 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ạngType
MP3audio/mpeg
Oggaudio/ogg
Wavaudio/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

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


12 nhận xét :

  1. Đag định dùng video làm background blog :d

    Trả lờiXóa
    Trả lời
    1. 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óa
    2. Mình nhớ ng xưa Y!blog có video bg đâu nhỉ :d

      Mà video bg full width đag là mốt mới khoảng 1 2 năm nay mà, xem ở awwwards.com í

      Xóa
  2. chèn 1 danh sách theo kiểu này thì như nào vậy bạn

    Trả lờiXóa
  3. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  4. Có sửa cái button thành hình tròn đc ko Dương?

    Trả lờiXóa
  5. Hoàn toàn có thể Duy ạ. Chèn hình hoặc FontAwesome vào đó là được mà

    Trả lờiXóa
  6. 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óa
  7. 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óa
  8. 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óa
  9. Duy tải cái này về amazingaudioplayer .com

    Trả lờiXóa

Hoan nghênh bạn để lại bình luận, nhưng đừng spam nhé :p Xem điều khoản

Back to top