Kể từ khi bài này được viết từ năm 2007 đến nay, thì các nhà thiết kế web và các mẫu dành cho blog đã thay đổi khá nhiều. Sự phát triển của HTML5 và các thẻ <audio> đã cho phép chúng ta có thể thêm nhạc vào blog và website một cách dễ dàng hơn.Để chuẩn bị cho việc giải thích và hướng dẫn cách post nhạc lên blog, hướng dẫn này giải thích việc this tutorial explains how to easily add an HTML5 mp3/audio player to your blog posts or layout. No JavaScript, Flash or plugins are required, and with a fallback for older browsers which don't support the player.Thậm chí tôi đã tạo ra một mẫu đơn giản để tạo các thẻ đơn giản dành cho bạn. Chưa bao giờ việc thêm nhạc vào blogspot dễ dàng đến như vậy.Các thẻ HTML5 mở rộng dành cho audio

Kể từ khi bài này được viết từ năm 2007 đến nay, thì các nhà thiết kế web và các mẫu dành cho blog đã thay đổi khá nhiều. Sự phát triển của HTML5 và các thẻ <audio> đã cho phép chúng ta có thể thêm nhạc vào blog và website một cách dễ dàng hơn.

Để chuẩn bị cho việc giải thích và hướng dẫn cách post nhạc lên blog, hướng dẫn này giải thích việc this tutorial explains how to easily add an HTML5 mp3/audio player to your blog posts or layout. No JavaScript, Flash or plugins are required, and with a fallback for older browsers which don't support the player.

Thậm chí tôi đã tạo ra một mẫu đơn giản để tạo các thẻ đơn giản dành cho bạn. Chưa bao giờ việc thêm nhạc vào blogspot dễ dàng đến như vậy.

Các thẻ HTML5 mở rộng dành cho audio

Thẻ <audio> là một cấu trúc mới của HTML5, cái mà chúng ta có thể dùng để phát lại những audio chèn vào và chơi trên blog hoặc website.Nó thì tương thích với Internet Explorer 9, Fifefox, Opera, Chrome, Safari và cả Netscape, và cũng có thể đặt nó liên kết chơi nhạc một cách tự động hoặc là lặp lại nếu có nhu cầu.Đây là ví dụ cụ thể về cách dùng thẻ <audio>:Chơi audio ở trên với việc dùng mã HTML như như bên dưới:<audio controls><source src="url-of-audio-file" />If you cannot see the audio controls, your browser does not support the audio element</audio>In the example above, all code related to the audio player is wrapped in <audio> tags. By including controls in the audio element, a simple player is displayed, enabling the user to begin playback when (or if) they want, and to adjust the volume.Any text between the audio tags (which is not enclosed in the <source> tags) is displayed in browsers which do not support the audio element (IE8 and below).Nếu bạn muốn file nhạc chơi tự động ngay khi mở web hoặc blog thì bạn có thể chọn autoplay như ví dụ bên dưới:<audio controls autoplay><source src="url-of-audio-file" />If you cannot see the audio controls, your browser does not support the audio element</audio>Giữ lại thuộc tính controls, bạn sẽ cho khách viếng thăm blog hoặc website của bạn sự lựa chọn là dừng hoặc chơi lại bản nhạc nếu họ nhấp chọn.Để phát lặp lại bản nhạc (nhập vào file nhạc nào mà chúng ta sẽ cho phát lại, mỗi khi bản nhạc đã kết thúc), bao gồm các thành phần loop trong thẻ <audio> giống như đoạn code bên dưới:<audio controls loop><source src="url-of-audio-file" />If you cannot see the audio controls, your browser does not support the audio element</audio>

Thẻ <audio> là một cấu trúc mới của HTML5, cái mà chúng ta có thể dùng để phát lại những audio chèn vào và chơi trên blog hoặc website.

Nó thì tương thích với Internet Explorer 9, Fifefox, Opera, Chrome, Safari và cả Netscape, và cũng có thể đặt nó liên kết chơi nhạc một cách tự động hoặc là lặp lại nếu có nhu cầu.

Đây là ví dụ cụ thể về cách dùng thẻ <audio>:

Chơi audio ở trên với việc dùng mã HTML như như bên dưới:

<audio controls>
<source src="url-of-audio-file" />
If you cannot see the audio controls, your browser does not support the audio element
</audio>

In the example above, all code related to the audio player is wrapped in <audio> tags. By including controls in the audio element, a simple player is displayed, enabling the user to begin playback when (or if) they want, and to adjust the volume.

Any text between the audio tags (which is not enclosed in the <source> tags) is displayed in browsers which do not support the audio element (IE8 and below).

Nếu bạn muốn file nhạc chơi tự động ngay khi mở web hoặc blog thì bạn có thể chọn autoplay  như ví dụ bên dưới:

<audio controls autoplay>
<source src="url-of-audio-file" />
If you cannot see the audio controls, your browser does not support the audio element
</audio>

Giữ lại thuộc tính controls, bạn sẽ cho khách viếng thăm blog hoặc website của bạn sự lựa chọn là dừng hoặc chơi lại bản nhạc nếu họ nhấp chọn.

Để phát lặp lại bản nhạc (nhập vào file nhạc nào mà chúng ta sẽ cho phát lại, mỗi khi bản nhạc đã kết thúc), bao gồm các thành phần loop trong thẻ <audio> giống như đoạn code bên dưới:

<audio controls loop>
<source src="url-of-audio-file" />
If you cannot see the audio controls, your browser does not support the audio element
</audio>

Blogger không cho phép chúng ta upload hoặc lưu trữ các file nhạc, như vậy để thêm được một bản nhạc thì bạn sẽ cần tìm đến một nơi lưu trữ cho file nhạc mp3/ogg. Hiện tại thì chúng ta có rất nhiều dịch vụ lưu trữ trực tuyến miễn phí với dung lượng lớn như :Dropbox: 2GB4Shared: 15GBBox: 10GBYoutube: vô tận (riêng với Youtube thì bạn vào địa chỉ http://www.tunestotube.com để đưa file mp3 và một ảnh để tạo thành file video)Trong khi các Blogger đề nghị sự giúp đỡ từ nhà cung cấp dịch vụ lưu trữ với các gói cả miễn phí lẫn có phí, tôi dự đoán rằng hầu hết các bạn đề muốn có một giải pháp lưu trữ miễn phí thật đơn giản, vì thế ở đây tôi có một vài đề nghị cho các bạn về việc lưu trữ miễn phí như:Link to public domain audio files which allow hotlinking, such as this collection of classical music on WikipediaTải file nhạc vào thư mục Public trên Dropbox của bạnLưu trữ file trên Google sites

Blogger không cho phép chúng ta upload hoặc lưu trữ các file nhạc, như vậy để thêm được một bản nhạc thì bạn sẽ cần tìm đến một nơi lưu trữ cho file nhạc mp3/ogg. 

Hiện tại thì chúng ta có rất nhiều dịch vụ lưu trữ trực tuyến miễn phí với dung lượng lớn như :
Dropbox: 2GB
4Shared: 15GB
Box: 10GB
Youtube: vô tận (riêng với Youtube thì bạn vào địa chỉ http://www.tunestotube.com để đưa file mp3 và một ảnh để tạo thành file video)

Trong khi các Blogger đề nghị sự giúp đỡ từ nhà cung cấp dịch vụ lưu trữ với các gói cả miễn phí lẫn có phí, tôi dự đoán rằng hầu hết các bạn đề muốn có một giải pháp lưu trữ miễn phí thật đơn giản, vì thế ở đây tôi có một vài đề nghị cho các bạn về việc lưu trữ miễn phí như:

• Link to public domain audio files which allow hotlinking, such as this collection of classical music on Wikipedia
• Tải file nhạc vào thư mục Public trên Dropbox của bạn
• Lưu trữ file trên Google sites

Trong quá trình soạn thảo bài đăng, chúng ta cứ soạn thảo bình thường, đến chổ nào muốn chèn file nhạc vào thì chúng ta để con trỏ ở đó rồi nhấp vào nút "HTML" ở góc trên bên trái khung soạn thảo. Rồi sau đó bạn dán code trực tiếp từ một dịch vụ lưu trữ nào có code trực tiếp đưa vào blog, hoặc nếu không có thì bạn copy link bản nhạc rồi dán vào công cụ bên dưới để tạo code sau đó dán vào blog.Hay một cách khác, bật HTML lên khi ta đang ở chế độ soạn thảo bài đăng và dán đoạn code như HTML vào.Generate code for audio playerAdd your audio URL Xem trước file nhạc sẽ được phát tại đây.

Trong quá trình soạn thảo bài đăng, chúng ta cứ soạn thảo bình thường, đến chổ nào muốn chèn file nhạc vào thì chúng ta để con trỏ ở đó rồi nhấp vào nút "HTML" ở góc trên bên trái khung soạn thảo. Rồi sau đó bạn dán code trực tiếp từ một dịch vụ lưu trữ nào có code trực tiếp đưa vào blog, hoặc nếu không có thì bạn copy link bản nhạc rồi dán vào công cụ bên dưới để tạo code sau đó dán vào blog.

Hay một cách khác, bật HTML lên khi ta đang ở chế độ soạn thảo bài đăng và dán đoạn code như HTML vào.

Generate code for audio player

Add your audio URL 

Xem trước file nhạc sẽ được phát tại đây.

Bạn cũng có thể dùng phương pháp bên dưới để dán code vào trong tiện ích HTML/JavaScript tại màn hình bố cục của blogger.Hoặc một lựa chọn nhanh hơn, dễ dàng hơn, dùng công cụ bên dưới để tự động thêm một tiện ích vào template của bạn.Generate a Blogger gadget for audio playerTitle of Gadget: Thêm URL file nhạc vào ô bên:

Bạn cũng có thể dùng phương pháp bên dưới để dán code vào trong tiện ích HTML/JavaScript tại màn hình bố cục của blogger.

Hoặc một lựa chọn nhanh hơn, dễ dàng hơn, dùng công cụ bên dưới để tự động thêm một tiện ích vào template của bạn.

Generate a Blogger gadget for audio player

Title of Gadget:  

Thêm URL file nhạc vào ô bên:  

Hy vọng rằng với tutorial này sẽ giúp cho các bạn thêm một file nhạc với HTML5 vào blog một cách đơn giản và dễ dàng hơn. Chúc các bạn thành công.Nguồn : http://www.bloggerbuster.com

Hy vọng rằng với tutorial này sẽ giúp cho các bạn thêm một file nhạc với HTML5 vào blog một cách đơn giản và dễ dàng hơn. Chúc các bạn thành công.

Nguồn : http://www.bloggerbuster.com