Chèn âm thanh vào Blogger bằng HTML5

Mới đây có bạn +truong linh có hỏi mình làm thế nào để chèn mp3 vào blog mà không sử dụng host phụ. Câu trả lời ở đây rất đơn giản, không thích xài host thì mình nghĩ  ngay đến một bác đó chính là "Lưu trữ file trên Google Drive" trước hết thì cứ đẩy hết file mp3 cần thiết lên đây và lấy link theo hướng dẫn trong bài đó nhé, còn cách thức để mà bấm vào nút nào đó hoặc hình ảnh nào đó để nó chạy thì mời các bạn cùng làm theo hướng dẫn sau đây của mình nhé.

Chèn âm thanh vào Blogger bằng HTML5
Chèn âm thanh vào Blogger

Chèn âm thanh vào Blogger bằng HTML5

Hiện tại bây giờ khi nhắc đến bất kì thứ gì liên quan đến video và âm thanh thì thứ mà mình nghĩ đến đầu tiên đó không là gì khác là HTML5. Bây giờ với sức mạnh của HTML5 mặc định bạn có thể làm rất nhiều thứ mà bạn muốn.

Để chèn một đoạn âm thanh đơn giản bằng HTML5 bạn chỉ cần chèn đoạn mã sau đây vào bài viết hoặc trang nào đó mà bạn muốn
<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>
không chỉ mp3 không đâu nhé mà còn 2 định dạng khác nữa bạn có thể thử

Định dạngType
MP3audio/mpeg
Oggaudio/ogg
Wavaudio/wav
và đây là ví dụ dành cho đoạn mã trên



nhạc hay quá nhỉ :D. Đây là kiểu mặc định của HTML5, còn nếu bạn muốn nó không hiển thị như vầy mà thay thế bằng nút hay hình ảnh khác thì làm theo như sau nhé.

Bạn chèn đoạn mã trên vào vị trí bất kì trong bài viết của bạn, nhưng mà bạn xóa thuộc tính "controls" đi, như vậy thì nó sẽ không hiện lên cái giao diện điều khiển. Như vậy để nó chạy âm thanh thì làm sao? bạn chèn đoạn mã sau đây vào chỗ mà bạn muốn người dùng bấm vào để chạy nhạc.
<button onclick="document.getElementsByTagName('audio')[0].play();">Nghe nhạc</button>
và đây là ví dụ



thật đơn giản phải không nào, bạn có thể thay bằng bất cứ thẻ hình ảnh hoặc bất cứ thể nào bằng HTML và CSS rồi trang trí sao cũng được, chỉ cần giữ lại thuộc tính
onclick="document.getElementsByTagName('audio')[0].play();"
là mọi thứ sẽ diễn ra như bình thường. Ví dụ
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREKM54ho1eLic4PZkR9_HyYtUtbBw1HGI_y55j6_WeZY01p4T9Rg" width="50" height="50" onclick="document.getElementsByTagName('audio')[0].play();">
Loa
mình hướng dẫn tới đây thôi còn đẹp xấu như thế nào do các bạn cả nhé.

Lời kết

Với sức mạnh của HTML5 thì bạn hầu như có thể làm được rất nhiều việc mà không cần sử dụng thêm những thứ lỉnh kỉnh khác nhiều để làm nặng thêm website của mình. Mong rằng qua thủ thuật này các bạn có thể áp dụng nó cho một số việc mà các bạn muốn trên website/blog của chính mình nhé. Mọi thắc mắc thêm cứ để lại nhận xét ở dưới cho mình.

P/S: Rất cảm ơn nhiều độc giả đã gửi nhiều câu hỏi và ý tưởng về cho mình, có thời gian mình sẽ cố gắng giải đáp tất cả một cách nhanh gọn nhất, do đó hãy cố gắng chờ mình nhé :)

 MỌI THÔNG TIN VUI LÒNG LIÊN HỆ NGAY VỚI CHÚNG TÔI :   

TRUNG TÂM NGHIÊN CỨU PHÁT TRIỂN CÔNG NGHỆ THẾ KỶ   
Phụ trách thiết kế : Mr.Mika 
Call me : 0926.340.479 - 0927.927.000 - Email :  Lienhe365@gmail.com 
Phụ trách kỹ thuật và kinh doanh : Mr. Sơn
Call me : 0919.083.000 - 0927.927.000   Email :   Setup247@Gmail.Com 
Hỗ trợ ZALO 24/24 :   Nhập số 0927.927.000 và zalo kết bạn và liên hệ nhé!

Không có nhận xét nào

Một số lưu ý khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Để bình luận một đoạn code, hãy mã hóa code trước nhé!

» Cảm ơn bạn đã ghé thăm websitemika.com
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một góp ý !
» Vui lòng đăng những góp ý lịch sự và gõ tiếng Việt có dấu nếu có thể
HƯỚNG DẪN ĐĂNG THÔNG TIN GÓP Ý :
Bước 1 – Gõ nội dung bạn cần góp ý tới chúng tôi.
Bước 2 - Xử lý mục " Nhận xét với tư cách "
Cách 1 : - Chọn Tên/URL: Gõ tên và địa chỉ blog bạn vào.Nếu không có tài khoản, bạn vẫn có thể nhận xét bằng cách Chọn hồ sơ là Tên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống để cho chúng tôi biết bạn là ai. Bạn vui lòng gõ tiếng Việt có dấu để mọi người không hiểu nhầm so thành sờ, mo thành mò.
Cách 2 : - Chọn Ẩn danh.
Bước 3 - Xem trước: Tuỳ, Bạn là người cẩn thận cần xem lại nội dung Bạn đã gõ (rất cần nếu Bạn có nhập mã, để xem nó hiển thị có đúng không).
Bước 4 - Nên nháy chuột vào nội dung, bấm phím Ctrol + A rồi Ctrol + C nhằm copy nội dung - Đề phòng lỡ hệ thống đăng góp ý trục trặt hoặc mạng rớt, ta có thể Ctrol + V dán đăng lại góp ý để khỏi tốn thời gian!
Bước 5 – Lick vào Button : Đăng nhận xét . Vậy là xong,góp ý của các bạn sẽ được Admin kiểm duyệt và cho đăng trong vòng 12h.Cảm ơn các bạn đã góp ý !

GIỚI THIỆU ĐẾN QUÝ KHÁCH MỘT SỐ DỰ ÁN SẼ THỰC HIỆN TRONG NĂM 2018


DANH MỤC BÀI ĐĂNG - KHÁCH MUỐN XEM NỘI DUNG GÌ LICK VÀO TIÊU ĐỀ ẤY


WEBSITEMIKA - THƯƠNG HIỆU UY TÍN BỞI HƠN 300 DOANH NGHIỆP VÀ CÁC THƯƠNG HIỆU VỪA VÀ NHỎ LỰA CHỌN
Điểm giao dịch: Online 24h
-Email: Setup247@gmail.com - Website: https://thietkeweb.mikalaza.com