Insert music into Blogger and Website. It is easy!

Saturday, 2 October 2010 by nkoknki | 0 comments

As mentioned in previous posts, using shortcode to collapse multiple actions to create a huge advantage for users. We also considered the shortcode to insert using MP3 . This article is an extension, allowing insertion of music into Blogger posts with the following advantages:

- Support multiple music formats, including MP3, AAC, FLV, MP4

- Support to insert videos from YouTube

- Allow more customization of the player parameters, eg height, width, song title, artist, color, ...

How in this article may apply to any site (not necessarily a blogger).

1. How to install

To use the shortcode play music, open your Blogger template (Layout - Edit HTML template file or open), and find:

<data:post.body/>

And change it to:

<span class="post-body"><data:post.body/></span>

In which the name of the class here is set to post-body. You can set any name are both (but remember to be little used.)

If you install a website for any public, then you also collect the contents to a shortcode to use span tags with class names like that.

Then, just before the closing </ body> you insert the following code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script src='http://rilwis.googlecode.com/svn/trunk/blogger/jquery.shortcode.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('.post-body').shortcode();
});
</script>

You'll notice that at the close end of this code is used to post-body class name above. If you renamed the correct memory to fit here.

2. Cách sử dụng Usage

Shortcodes are designed in two parts: audio and video. They use 2 flash player is well known WP Audio Player (already mentioned in previous post ) and JW Player .

WP Audio Player only plays MP3s, but can customize high. It allows to play playlists, custom song name, artist, color, ...

But then again JW Player variety of music formats are supported (MP3, AAC, FLV, MP4). It also plays videos from YouTube. It is capable of highly customizable through XML configuration files, but this approach is not applicable in our case (do not use javascript to automatically generate XML file as you want), so Its capabilities are also limited much of which comes to playing playlist feature unusable: (.

We will review this and other shortcodes 2 player support.

2.1. General syntax of writing shortcodes

These shortcodes are written in the form below:

[name_shortcodes:key_1=value_1|key_2=value_2|...|key_n=value_n]

Which noted that ten_shortcode must be accompanied by a colon (:) right behind, ten_shortcode differentiated case sensitive. Key_x = value pairs value_x (both sides equal sign (=) without spaces) is to declare the options of the shortcode. Value_x values may contain spaces. The order of the pairs of values are not important (which one you liked the previous record, which after all are).

Also note that after the opening bracket ([) and the first marked square brackets (]) with no spaces.

2.2. Chơi nhạc MP3 MP3 player

To use the WP Audio Player to play MP3, use the shortcode as follows:

[ audio:url=link_đến_file_mp3 ]

in which the audio is the name shortcode. You can use other names as mp3, the result is exactly the same.

In the parameters, the parameters required to have a url, used to declare links to music files to play. If you plan on playing a playlist, the list of audio paths, are separated by a comma (,).

The other parameters are optional, they include:

animation: to close or open the player at the start. The value of 'yes' (that player will play, when clicked will open) and 'no' (player always open). Default 'yes'.

artists: artist, if this is the playlist is a list of artist names separated by comma (,). No default value.

autostart: play automatically when the page is opened. The value of 'yes', 'no'. The default 'no'.

loop: play a song or playlist repeat end. The value of 'yes', 'no'. The default 'no'.

titles: song name, if this is the playlist is a list of song titles are separated by a comma (,). No default value (if that is the name song is Track # 1, Track # 2, ...).

volume: initial volume when playing music. Value from 1 to 100. Default. is 60.

width: the width of the player. Value in pixels. Default is 290.

The parameters of many colors, you see at the WP Audio Player .

The following example will show a music playlist with 2 items, a custom song name, artist name, and repeat mode at the end of the initial volume of 100.

[audio:url=https://sites.google.com/site/duythanh220391/files/KatyPerry-TeenageDream.mp3|artists=Katy Perry|loop=yes|titles=Teenage dream|volume=100]

Shortcode is:

[ audio:url=https://sites.google.com/site/duythanh220391/files/KatyPerry-TeenageDream.mp3|artists=Katy Perry|loop=yes|titles=Teenage dream|volume=100 ]

2.3. Play MP3, AAC, FLV, MP4, and YouTube

To play the music format, you insert the shortcode following syntax:

[ music:url=link_đến_file_nhạc ]

in which music is the name shortcode. Outside this shortcode, you can use another name as video, flv, mp4, youtube, same results so well.

Same as above, mandatory parameter is the url, used to declare links to music files to play. Note that this is just a music player without playing the playlist (the reason mentioned above). In case you insert videos from YouTube, the value of this variable will be a link to that video.

The other parameters are optional, they include:

autostart: play automatically when the page is opened. The value of 'yes', 'no'. The default 'no'.
backcolor: Color of the control bar. Value recorded in the form of hexadecimal color code, no # character at the top. # FFFFFF default.
frontcolor: color of text and icons in the navigation bar. Value recorded in the form of hexadecimal color code, no # character at the top.
fullscreen: automatically play videos in full screen mode. Value 'yes', 'no'. The default 'no'.
icons: show / hide icons play (loading) in the middle of the video. Value 'true' (current), 'false' (hidden).Default 'true'.
lightcolor: color of text and icons in the navigation bar on the mouse. Value recorded in the form of hexadecimal color code, no # character at the top.
loop: play a song or playlist repeat end. The value of 'yes', 'no'. The default 'no'.
height: the height of the player, only when playing video. If the MP3 or AAC music files, then this value will be automatically adjusted. Pixel value is calculated. Default 300.
volume: initial volume when playing music. Value from 1 to 100. Default 60.
width: the width of the player. Value in pixels. Default 400.

Above are the main parameters, full list of parameters please see the homepage of the JW Player.

Eg. below, we will try to insert a MP4 video, a little customization of color, width and height:

Shortcode is:

[ music:url=http://tuanh.org/music/video.mp4|backcolor=c3456f|lightcolor=999999|height=400|width=400|volume=100 ]

And this is a test insert MP3 player as well with this:

[music:url=https://sites.google.com/site/duythanh220391/files/KatyPerry-TeenageDream.mp3]

Shortcode is:

[ music:url=https://sites.google.com/site/duythanh220391/files/KatyPerry-TeenageDream.mp3 ]

Insert a test video from Youtube:

[video:url=http://www.youtube.com/watch?v=7fOGiOST3EE]

Shortcode is:

[ video:url=http://www.youtube.com/watch?v=7fOGiOST3EE ]

Hopefully using shortcodes will help you more comfortable to use when writing in Blogger.

Blog tips

Connecting IT

Insert music into Blogger and Website. It is easy!

0 comments:

Post a Comment

Learning English

Followers

Visitors