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é :)

23 bình luận

  1. avatar says

    23:20 Ngày 15 tháng 10 năm 2014

    yeah, mới đặt gạch mà bạn đã ra bài mới rồi, bạn làm việc rất mau mắn, mình cám ơn bạn nhiều :v

  2. avatar says

    23:42 Ngày 15 tháng 10 năm 2014

    nó không hoạt động bạn ơi, mình đã up lên google drive và lấy link y như bài hướng dẫn của bạn và bỏ và đường dẫn mà nó vẫn không chạy :D

  3. avatar says

    23:46 Ngày 15 tháng 10 năm 2014

    ak và nếu mình muốn ẩn luôn trình nghe nhạc và chỉ cho nó phát ra âm thanh khi click vào hình thì làm như thế nào vậy bạn?

  4. avatar says

    23:56 Ngày 15 tháng 10 năm 2014

    ak bạn ơi có thể pause lại được không bạn(ý mình là khi click lại vào cái ảnh chứ không phải nút trên bảng điều khiển nhé), nếu được xin bạn hướng dẫn dùm, cám ơn bạn lần nữa :v

  5. avatar says

    20:46 Ngày 16 tháng 10 năm 2014

    Mình nghĩ nếu vậy thì cho hiện cái bảng điều khiển là tốt nhất, bạn thử đặt mình vào vị trí người dùng thử, khi nào họ sẽ pause lại âm thanh? Và mục đích của họ Pause lại là làm gì, hầu hết trong lĩnh vực tiếng Anh mà blog bạn chia sẻ họ không chỉ pause mà sẽ tua lại đoạn mà họ cần nghe lại nếu như đây là một đoạn dài.

    Còn nếu như nó về cách phát âm 1 từ thì đơn giản chỉ đoạn audio đó chỉ có khoảng 1s để xong nên mình nghĩ pause là không cần thiết.

  6. avatar says

    21:16 Ngày 16 tháng 10 năm 2014

    cậu ơi mình lấy link như bài hướng dẫn cậu nói rồi mà nó không hoạt động :v

  7. avatar says

    21:58 Ngày 16 tháng 10 năm 2014

    Nhiều khi bạn lấy nhầm link folder rồi chứ cái audio mình nhúng trong bài viết từ Google Drive mà
    https://googledrive.com/host/0B04m_ldP5JJzWHhCaVB1YXlLY1E/Canon.mp3

  8. avatar says

    23:04 Ngày 16 tháng 10 năm 2014

    ok cám ơn bạn, nhờ bạn mà mình đã làm được :V

  9. avatar says

    20:07 Ngày 31 tháng 03 năm 2015

    audio lấy link trực tiếp từ Google Driver hình như bị sao rồi cậu ơi, lúc trước còn nghe được. bạn có biết chỗ nào up audio lấy link trực tiếp được nữa ko?

  10. avatar says

    20:37 Ngày 31 tháng 03 năm 2015

    Nếu bạn có sử dụng Dropbox thì nó cũng là một trong những dịch vụ host được đấy :D

  11. avatar says

    21:24 Ngày 31 tháng 03 năm 2015

    Host được, nhưng không lấy link trực tiếp được nữa.

  12. avatar says

    21:46 Ngày 31 tháng 03 năm 2015

    Mình có test qua rồi, nếu bạn làm như bài hướng dấn này của mình thì 100% được http://www.kslzone.net/2014/07/luu-tru-file-tren-google-drive-moi.html
    mọi thứ đều ổn bạn nha, mình có update lại demo luôn rồi đó.

  13. avatar says

    08:28 Ngày 01 tháng 04 năm 2015

    https://7720a4f16b031d73336298a70a75b6212151a5ff.googledrive.com/host/0B04m_ldP5JJzeDRkTE54bU01eFk/nhac.mp3

    "7720a4f16b031d73336298a70a75b6212151a5ff" mã này lấy ở đâu vậy cậu. Update 01/04/2015

  14. avatar says

    08:29 Ngày 01 tháng 04 năm 2015

    Bạn làm theo hướng dẫn ở bài viết này của mình nhé, mình share forlder để lấy link file http://www.kslzone.net/2014/07/luu-tru-file-tren-google-drive-moi.html

  15. avatar says

    10:51 Ngày 03 tháng 07 năm 2015

    zô trang zing rồi click chuột vao chia sẻ, lấy mã nhúng dán vào html là xong

  16. avatar says

    19:26 Ngày 05 tháng 01 năm 2016

    Anh ơi anh cho em hỏi, nếu bây giờ muốn làm một cái khung nhỏ, để cho người ta chọn đáp án môn tiếng anh, giống như làm bài tập, xong tự hiện ra kết quả trên blog có được không anh. anh giúp em với ạ

  17. avatar says

    19:48 Ngày 05 tháng 01 năm 2016

    Bạn có thể kiếm những dịch vụ online về tạo bài kiểm tra với từ khóa "free online quiz" chẳng hạn. Mình có tìm được cái này
    https://freeonlinesurveys.com/free-online-quiz#/
    hình như có chức năng embed vào website bạn có thể thử nhé.

  18. avatar says

    19:58 Ngày 05 tháng 01 năm 2016

    Dạ vâng.
    Em tên Sáng, hiện đang học luật năm cuối đại học quốc gia hà nội> Hiện em đang làm blog học tiếng anh miễn phí cho các bạn sinh viên.....
    Anh có thể cho em hỏi, sau khi tạo các đó xong muốn chèn vào blog thì kiểu gì vậy anh.
    Nói thật là em học khối C nhưng thích mày mò tìm hiểu về công nghệ> Có gì anh hướng dẫn giúp em với ạ
    Vd như trang này họ làm các bài test sau đó hiện là kết quả, ý của em là muốn như vậy http://tienganhb1.com/QuizApp/#/RadioButton/R1 anh xem giúp em ạ

  19. avatar says

    00:00 Ngày 09 tháng 01 năm 2016

    nói thật cái này bạn có thể cho đáp án đúng vào 1 class sau đó viết một cái javascrip onlcik hoặc jquery, khi nhấn nút kết quả thì đáp án đổi màu so với các kết quả phụ :) trên lý thuyêt là vậy

  20. avatar says

    08:17 Ngày 09 tháng 01 năm 2016

    Mình quên mất bạn này, Bạn Sáng nói đúng và mình muốn bổ sung ít ý kiến của mình nữa thực tế thì nói thật là sử dụng Javascript sẽ rất là cực, nếu bạn sử dụng trên blogspot vì bạn mất rất nhiều thời gian để làm và cả chỉnh sửa nữa.

    Còn cái dịch vụ kia, thì theo mình tìm hiểu thì nó có hỗ trợ embed nhưng mình chưa đăng ký và tạo thử nên cũng không biết chính xác nó nằm đâu nữa. Cái này thì chắc phiền bạn phải tự thân vận động thôi.

  21. avatar says

    14:19 Ngày 14 tháng 01 năm 2016

    Vâng em cảm ơn anh Sáng Nguyễn Quang, Anh Lầm Kiều,
    Chúc các anh mạnh khỏe !

  22. avatar says

    13:39 Ngày 07 tháng 06 năm 2016

    Cái này là trắc nghiệm trước mình có làm làm có gì pm vào email này mình tìm mình gửi cho hoangdien1402@gmail.com

  23. avatar says

    12:47 Ngày 02 tháng 11 năm 2016

    Hình như bây giờ không nhúng nhạc vào Blogger được nữa... Lấy mã nhúng từ nhaccuatui cũng bị lỗi luôn
    Duong Dai Nghia

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.