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ộ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
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.
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
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é.
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é :)
 |
| 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>| Định dạng | Type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
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>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();"<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREKM54ho1eLic4PZkR9_HyYtUtbBw1HGI_y55j6_WeZY01p4T9Rg" width="50" height="50" onclick="document.getElementsByTagName('audio')[0].play();">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é :)
lúc 23:20 15 tháng 10, 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
lúc 23:42 15 tháng 10, 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
lúc 23:46 15 tháng 10, 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?
lúc 23:56 15 tháng 10, 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
lúc 20:46 16 tháng 10, 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.
lúc 21:16 16 tháng 10, 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
lúc 21:58 16 tháng 10, 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
lúc 23:04 16 tháng 10, 2014
ok cám ơn bạn, nhờ bạn mà mình đã làm được :V
lúc 20:07 31 tháng 3, 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?
lúc 20:37 31 tháng 3, 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
lúc 21:24 31 tháng 3, 2015
Host được, nhưng không lấy link trực tiếp được nữa.
lúc 21:46 31 tháng 3, 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 đó.
lúc 08:28 1 tháng 4, 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
lúc 08:29 1 tháng 4, 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
lúc 10:51 3 tháng 7, 2015
zô trang zing rồi click chuột vao chia sẻ, lấy mã nhúng dán vào html là xong
lúc 19:48 5 tháng 1, 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é.
lúc 00:00 9 tháng 1, 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
lúc 08:17 9 tháng 1, 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.
lúc 13:39 7 tháng 6, 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
lúc 12:47 2 tháng 11, 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