Web Design Academy

Wednesday, December 3, 2014

1stwebdesigner

The Ultimate Guide to Podcasting Using WordPress

Posted: 03 Dec 2014 05:30 AM PST

Podcasting has been popular for some time now, especially among the techies. You may have read a lot of articles on how to start a blog, but how can you take advantage of your WordPress blog to convert it and try to start podcasting? Here’s your must-read guide to podcasting using WordPress.

Now that things are beginning to be put online, it's becoming hard to imagine how and why some companies and individuals are not uploading anything on the Internet.

Podcasts are online audio and video content delivered to users via Really Simple Syndication (RSS) feeds.

There are still more ways to make use of podcasts these days. You can now take advantage of this technology in either of the following ways:

Self-Guided Tours
Playing Music
Airing Talk Shows
Training
Storytelling

Now, one of the many benefits podcasting offers is that listeners can play this content wherever and whenever they want.

Because of the popularity of podcasting, it has turned journalists into bloggers, and radio personalities into podcasters.

In addition, WordPress has been opened as an avenue not only for blogging but for e-commerce and podcasting as well. It is very easy for a blogger to both perform blogging and podcasting activities.

focus

Things to Prepare

WordPress Site
Audio Player Plugin
FeedBurner
iTunes account
Image Artwork (1400×1400 px)
(Optional) S3 Amazon or Libsyn podcast account

*Disclaimer: This is the least costly method I know that will help you spark up your podcasts. Mostly, these are free services with the exception of your podcast host accounts (in S3 Amazon or Libsyn) and probably, your WordPress site. I'm also assuming that you already know how to start a WordPress site. If you happen to have no idea at all about this, click here.

Let's start!

Preparing Your WordPress Site:

Let's face it. Not everybody owns an iPhone, iPad, iPod. Not everybody even has iTunes installed in their computers. Having said that, it's safer that you resort to hosting your podcasts in a platform that can be available to everyone.

Good thing, WordPress is the perfect fit for that. WordPress has been a potent tool in sharing content. Its uses extend from simple text-based information to rich and dynamic data such as audio and video. Plus, with the variety of plugins and tutorials about WordPress out there, setting up everything and troubleshooting them is a cake-walk.

To prepare your WordPress site for podcasting, simply create a category by logging in to your account. Hover on "Posts" and a submenu appears. Click on "Categories" then add a new category named "Podcasts".

You would also want to leave the "Parent" field to none. To finish everything, click on "Add New Category".

Now that you already created a category, you will post all your podcasts under this one. The links to your podcasts from now on will be filed under: http://yoursitename.com/category/podcasts. Just take note of this.

Next thing you would want to do is to upload your audio files. Now you have a few options to do that.

Using a Plugin

Go to your WordPress Admin Dashboard.

Click on "Plugins" then, "Add New"

Key the phrase "Audio Player" in the search box and install the plugin created by Martin Laine.

Activate it.

*You also have the option to download the plugin to your computer and install it by yourself.

Other Plugin Options:

Using the Audio Shortcode

You can add a link from your website to a file from another site. You just have to link it to the WordPress audio shortcode ([ audio <space> link]).

You can upload files to your blog's Media Library and be able to edit, add, or remove the Title, Artist, Caption and Description of the File. If you want to insert it in a post, be sure to select the option called "Embed Media Player" and then click the "Insert into Post" button. It will insert the Audio Shortcode.

Aside from this, you can also create playlists using your Media Library. Using several files that you have uploaded into your server, you can put together a list of podcasts that you want to play. You can even play them on your sidebars.

Add files to your playlist. (.mp3)

Once your files are uploaded, a "Create Audio Playlist" tab will be visible in the "Add Media Window".

You can choose which tracks to include and insert in the post.

Click on "Create a New Playlist" and you will be taken to the "Edit Audio Playlist" menu where you can drag tracks to reorder them. You can also include details in your Playlist Settings , remove or include Tracklists, Artists, Names and Images.

Embedding the Podcast/Playlist on Your Sidebar

From your WordPress Dashboard, hover on the "Appearance" tab.
Click on "Widgets."
Drag the "Music Player Widget" to your desired sidebar.
Click on the link to upload or choose your media.

Create a Download Link

Another option is to create a download link that will require you readers to download the file to their computers and play it there. This is easier, especially if you are too conscious of the file size of your podcast, but you also need to adhere to copyright laws.

Now that you have already uploaded your podcasts on your blog, they are now ready to be published.

Submitting Your Site to FeedBurner

A feedburner stands between your blog and iTunes. Being able to publish feeds is pertinent because it gives you options to easily migrate to other websites.

According to Google,

Feeds are a way for websites large and small to distribute their content well beyond just visitors using browsers. Feeds permit subscription to regular updates, delivered automatically via a web portal, news reader, or in some cases good old email. Feeds also make it possible for site content to be packaged into “widgets,” “gadgets,” mobile devices, and other bite-sized technologies that make it possible to display blogs, podcasts, and major news/sports/weather/whatever headlines just about anywhere.

That being said, you will be needing a feedburner URL. To do that, go to feedburner.com. For this link, you will be needing a Gmail account.

Google has centralized all services you need, so, having a Gmail account will be advantageous. You will eventually need it to use Analytics, WebMaster tools, AdWords, AdSense, YouTube, and, of course, FeedBurner.

After signing in, you will see a welcome message. Below this is an invitation to "Burn a feed right this instant."

You will be needing your feed address there. (http://yoursite.com/category/podcasts)

feed1

Paste it in the address and add "/feed" at the end of it. Check "I am a podcaster!".
Click on "Next." In the case that you receive an error, that means your XML file is invalid. You need to check your blog is public (check Privacy Settings). Remember, private blogs can't be submitted to iTunes.

feed3

Next, in the "Identify Feed Source" window, you need to select or confirm the appropriate feed. If you see other options, click on the one containing "category/podcasts/".
Then, you need to review the feed article and address. You can always change or keep them. Click on "Next".

feed5

You will now be directed to the "Congrats" page. From there, you need to copy the feed address. (It begins with feeds.feedburner.com and ends with the title you confirmed.
Click the Next button.

feed6

Afterwards, you need to tick on the check box next to "Include iTunes Podcasting Elements" in the "Configure Your Podcast" page.
You will also be asked to select the category and subcategory for this.
Click the Next button.
Next, you will be asked for the statistics tracking option. Click on "Next" afterwards.
You now have your feeds prepared for iTunes store.

Submitting Your Podcast to iTunes

Now that your post is ready and already published, it's time to let the masses know. For this, you'll be using the iTunes platform. As you remember, as mentioned earlier, that not everybody uses iTunes. Yes, that is true but iTunes is the most plausible of all the alternatives. If you really don't like to distribute your work on iTunes, you have alternatives:

As said, iTunes will be the distributor for your podcasts. For this, you will be needing an account. iTunes may also require you to key in your credit card number. But don't worry, it's totally free.

Here are the steps:

Go to Apple's instructions on testing your feed and following them.
Now that you confirmed that you can listen to your podcast using iTunes, submit your podcast.
After submission, your podcast will be reviewed by the iTunes staff. That means your podcasts won't be readily available.
Once your podcasts are accepted, you will be able to get a link to distribute them through email or website linking.

Some notes on Files

Files can be hosted using your current server. It's the easiest and least costly way to do so. However, when traffic increases, your server is prone to crashing and being permanently suspended.
Try using S3 Amazon or Libsyn

Bonus: Equipment You Can Use

To make your podcasts high-quality, you also need to invest in your equipment. Yes, content is all that matters, but bringing in the content in a better way possible is a game changer. Here are a few gadgets you may want to invest in.

Software:

Microphones

Heil PR-40

heil

Rode Podcaster

rode

MXL 990 Condenser

mxl

Snowball USB Microphone

snowball-mic

Mixers and Audio Interfaces

Alexis Multimix 16

multimix

Yamaha MW12CX

mw12cx

Portables

Zoom H4n

zoom

Roland R-05

Roland R-05

If you want to learn how to create podcasts, here are a few awesome people who could help you:

Here are some great podcasts for web designers and developers:

Conclusion

You are now ready to Podcast using your WordPress site! We here at 1stwebdesigner are happy to finally see how you roll on those podcasts. We hope that we have helped you in this. If you have some questions, feel free to ask.

Monday, December 1, 2014

1stwebdesigner

Create a Custom HTML5 Audio and Video Element UI with MediaElement.js

Posted: 01 Dec 2014 06:00 AM PST

There are a lot of things you can create with custom HTML5. The new elements make it possible to simplify things as opposed in the past that you need to add CSS to make it work or display.

Two of the good examples are the audio and video elements. Although the audio and video element have a generic look, it can be customized using a jQuery plugin called MediaElement.js.

In today’s tutorial, you will code an audio and video player using the UI toolkits made by Rudolph Musngi, CSS3 to style the elements and the MediaElement.js for the functionalities.

OK, let’s start.

Resources You Need to Complete This Tutorial

UI Toolkits by Rudolph Musngi
jQuery Library (You can use the download version or Google's Hosted Library)
MediaElement.js
Time and Patience

Custom Audio Player

audio

Download Source Files View Demo

Step 1 – Download jQuery library and MediaElement.js

To make all things work, you need to download, first, the jQuery Library or use Google's Hosted Library.

Then, you also need the MediaElement.js script and extract it on your preferred location. Inside the folder of the extracted MediaElement.js, you need the following files:

mediaelement-and-player.min.js
flashmediaelement.swf
silverlightmediaelement.xap

Step 2 – Adding Necessary Links on the Head Section

To start, you need to add the following links to the Head Section. This includes the links to the CSS files, jQuery library and MediaElement.js.

  <!DOCTYPE html>  <html lang="en-US">  <head>      <meta charset="utf-8">      <title>Creating a Custom HTML5 Audio and Video Element UI with      MediaElement.js</title>      <link href="css/normalize.css" rel="stylesheet" type="text/css">      <link href="css/style.css" rel="stylesheet" type="text/css">      <link href="css/audio.css" rel="stylesheet" type="text/css">      <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>      <script src="js/mediaelement-and-player.min.js" type="text/javascript"></script>  </head>

Step 3 – The Markup

Now, create the div that will hold the audio element. You will give it a class of audio-player and inside it, you will put a paragraph element for the title and the audio element itself.

    	<div class="audio-player">          <p>Michael Buble - Everything</p>      	<audio id="audio-player" src="restheces/Michael Buble - Everything.mp3" type="audio/mp3" controls="controls"></audio>    	</div>

Step 4 – The Script

Now that you had set up the audio markup, you need to add the code below before the ending of the tag.

Notice that you selected the class audio-player that you used to wrap the audio elements. These are the basic settings set for this tutorial; you can check out the mediaelement.js documentation to learn more about the available settings.

  $(document).ready(function() {      	$('#audio-player').mediaelementplayer({          	alwaysShowControls: true,          	features: ['playpause','volume','progress'],          	audioVolume: 'horizontal',          	audioWidth: 364,     	     audioHeight: 70      	});  	});

Step 5 – The CSS

Next, set up the styles of the custom audio player. First, add some reset styles to make sure that there are no other extra styles on each browser.

  .audio-player,.audio-player div,.audio-player p,.audio-player a,.audio-player button {  	margin: 0;  	padding: 0;  	border: none;  	outline: none;  }

Then, style the player container and add the width a height on it and style the paragraph tag for the title.

  .audio-player {  	position: relative;      margin: 0 auto;      background: #d14242;  	width: 426px;      height: 120px;  }    .audio-player p {      position: absolute;      text-align: center;      text-transform: uppercase;  	left: 143px;  	top: 62px;      font-family: 'Open Sans', sans-serif;      font-weight: 700;      font-size: 17px;  	color: #fcc;      font-weight: 700;  }

Next, style the play-pause button. This will be in a form of png sprite image and manipulated using the background-position.

    .mejs-controls .mejs-button button {      position: absolute;      display: block;  	width: 73px;      height: 71px;  	cursor: pointer;      background: #961717;  }    .mejs-controls .mejs-play button,.mejs-controls .mejs-pause button {  	width: 115px;      height: 120px;      background: #961717 url(../img/playerbuttons.png) 0 0 no-repeat;  }    .mejs-controls .mejs-pause button {      background-position: 0 -120px;  }

For the Mute and Unmute Control button, use a png sprite image and manipulate the background-position to display each part.

  .mejs-controls .mejs-mute button,.mejs-controls .mejs-unmute button {  	width: 24px;      height: 23px;      background: transparent url(../img/mute-unmute.png) 0 0;  	top: 28px;  	left: 140px;  }    .mejs-controls .mejs-unmute button {      background-position: 0 -23px;  }

Now, add the following styles for the volume slider. Notice that instead of using an image for the circle icon, CSS3 was used instead using the border-radius property.

    .mejs-controls div.mejs-horizontal-volume-slider {      position: absolute;  	top: 33px;  	right: 23px;      cursor: pointer;  }    .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {  	width: 232px;      height: 8px;      background: #961717;  	-webkit-border-radius: 4px;      -moz-border-radius: 4px;      border-radius: 4px;  }    .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {      position: absolute;  	width: 0;      height: 8px;      background: #961717;  	top: 1px;  	left: 1px;      -webkit-border-radius: 8px;      -moz-border-radius: 8px;      border-radius: 8px;  }

The CSS codes below will set the background color and dimension of the time loaded and current time.

    .mejs-controls div.mejs-time-rail {  	width: 380px;  }    .mejs-controls .mejs-time-rail span {      position: absolute;      display: block;  	width: 380px;      height: 12px;  	top: 40px;  	left: 55px;      cursor: pointer;      -webkit-border-radius: 0 0 2px 2px;      -moz-border-radius: 0 0 2px 2px;      border-radius: 0 0 2px 2px;  }    .mejs-controls .mejs-time-rail .mejs-time-total {      background: #e26060;  	width: 311px !important;      height: 12px;      margin-top: 68px;      margin-left: 60px;  }    .mejs-controls .mejs-time-rail .mejs-time-loaded {  	top: 0;  	left: 0;  	width: 0;      background: #961717;  }    .mejs-controls .mejs-time-rail .mejs-time-current {  	top: 0;  	left: 0;  	width: 0;      background: #961717;  }

Next, add some styles for the time and volume sliders (handle).

    .mejs-controls .mejs-time-rail .mejs-time-handle {      position: absolute;      display: block;  	width: 10px;      height: 10px;  	top: 2px;      background: #330202;      -webkit-border-radius: 50%;      -moz-border-radius: 50%;      border-radius: 50%;  	left: 11px;  }    .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {      position: absolute;      display: block;  	width: 12px;      height: 12px;      -webkit-border-radius: 50%;  	top: -2px;      background: #330202;  }

Finally, add the styles for the Time Progress Bar tooltip. This will appear when you hover over the progress bar.

    .mejs-controls .mejs-time-rail .mejs-time-float {      position: absolute;      z-index: 9999;  	color: fff;  	width: 33px;      height: 23px;  	top: -26px;      display: none;      margin-left: -17px;  }    .mejs-controls .mejs-time-rail .mejs-time-float-current {  	width: 33px;      display: block;  	left: 0;  	top: 4px;      font-family: 'Open Sans', sans-serif;      font-size: 10px;      font-weight: 700;  	color: #f89494;      text-align: center;      z-index: 9999;      background: #bf3737;      padding: 2px 2px 5px;  }    .mejs-controls .mejs-time-rail .mejs-time-float-current:after {      content: "";      position: absolute;  	width: 0;      height: 0;      border-width: 10px;      border-style: solid;      border-color: #bf3737 transparent transparent;  	top: 15px;  	left: 8px;  }

And that's really it! Now that you're done on the custom audio element. On the next part of this tutorial, you will create a custom video element.

Custom Video Player

video

Step 1 – Download jQuery library and MediaElement.js

Just like the custom audio element, you need to download first the jQuery library or use Google’s Hosted Library.

Then, you also need the MediaElement.js script and extract it.

The same with the custom audio element, you will again use following files inside the MediaElement.js folder:

mediaelement-and-player.min.js
flashmediaelement.swf
silverlightmediaelement.xap

Step 2 – Adding Necessary Links on the Head Section

Afterwards, you will add the following links to the head section. This will again include the links to the CSS files, jQuery library and MediaElement.js.

  <!DOCTYPE html>  <html lang="en-US">  <head>      <meta charset="utf-8">      <title>Creating a Custom HTML5 Audio and Video Element UI with      MediaElement.js</title>      <link href="css/normalize.css" rel="stylesheet" type="text/css">      <link href="css/style.css" rel="stylesheet" type="text/css">      <link href="css/video.css" rel="stylesheet" type="text/css">      <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>      <script src="js/mediaelement-and-player.min.js" type="text/javascript"></script>  </head>

Step 3 – The Markup

Now create the div that will hold the video element. You will wrap the video element in a class of video-player.

    <div class="video-player">    <video width="490" height="276" poster="img/video-poster.jpg">    <video src="resources/Pedestrian.mp4" type="video/mp4">    </video>   </div>

Step 4 – The Script

Now that you have the markup set up, add the code for the video controls and settings. Notice that you selected the video element and then used the following settings:

alwaysShowControls – This will display or hide the video controls using the true or false value.
videoVolume – This will display the volume slider horizontal.
features: [‘playpause’,’progress’,’volume’,’fullscreen’] - This set up the control for the video.

For this part, you will use the following settings but you can configure more settings by checking out MediaElement.js documentation page.

    $(document).ready(function() {      $('video').mediaelementplayer({          alwaysShowControls: false,          videoVolume: 'horizontal',          features: ['playpause', 'progress', 'volume', 'fullscreen']      });  });

Step 5 – The CSS

For the CSS, start by adding reset and basic styles to the elements.

  .mejs-inner,.mejs-inner div,.mejs-inner a,.mejs-inner span,.mejs-inner button {  	margin: 0;  	padding: 0;  	border: none;  	outline: none;  }    /* General Styles */  .mejs-container {  	position: relative;  	background: #000;  }    .mejs-inner {  	position: relative;  	width: inherit;  	height: inherit;  }    .me-plugin {  	position: absolute;  }    .mejs-container-fullscreen .mejs-mediaelement,.mejs-container-fullscreen video,.mejs-embed,.mejs-embed body,.mejs-mediaelement {  	width: 100%;  	height: 100%;  }    .mejs-embed,.mejs-embed body {  	margin: 0;  	padding: 0;  	overflow: hidden;  }    .mejs-container-fullscreen {  	position: fixed;  	overflow: hidden;  	z-index: 1000;  	left: 0;  	top: 0;  	right: 0;  	bottom: 0;  }    .mejs-poster img {  	display: block;  }    .mejs-background,.mejs-mediaelement,.mejs-poster,.mejs-overlay {  	position: absolute;  	top: 0;  	left: 0;  }    .mejs-overlay-play {  	cursor: pointer;  }    .mejs-inner .mejs-overlay-button {  	position: absolute;  	top: 50%;  	left: 50%;  	margin-left: -82px;  	width: 158px;  	height: 158px;  	background: url(../img/playbutton.png) no-repeat;  }

Next, you will style the controls. The container will have a width of 100% and a position of absolute. You will use a png sprite image for the play and pause button and manipulate the display of each element using the background-position property.

  .mejs-container .mejs-controls {  	left: 0;  	bottom: 0;  	background: #c94745;  	position: absolute;  	width: 100%;  	height: 15px;  }    /* Controls Buttons */  .mejs-controls .mejs-button button {  	display: block;  	cursor: pointer;  	margin-top: -8px;  	margin-left: -6px;  	width: 6px;  	height: 9px;  	background: transparent url(../img/play_pause.png);  }    /* Play & Pause Button */  .mejs-controls div.mejs-playpause-button {  	position: absolute;  	top: 12px;  	left: 15px;  }    .mejs-controls .mejs-play button,.mejs-controls .mejs-pause button {      width: 6px;  	height: 9px;  	background-position: 0 0;  }    .mejs-controls .mejs-pause button {  	background-position: 0 -9px;  }

For this part of the CSS, let’s style the Mute and Unmute buttons. Again, you will use a png sprite image and manipulate its display position using background-position.

    .mejs-controls div.mejs-volume-button {      position: absolute;  	top: 12px;  	left: 45px;  }    .mejs-controls .mejs-mute button,.mejs-controls .mejs-unmute button {  	width: 11px;      height: 11px;      background: url(../img/mute_unmute.png)no-repeat;      background-position: 0 0;      margin-left: -14px;      margin-top: -9px;  }    .mejs-controls .mejs-unmute button {      background-position: 0 -12px;  }

Now, add some styles to the Full or Window Screen button. Similar with the play and pause button, for the Mute and Unmute button, you will use a png sprite image file to display each side of the full or window screen element.

  .mejs-controls div.mejs-fullscreen-button {  	position: absolute;  	top: 7px;  	right: 7px;  }    .mejs-controls .mejs-fullscreen-button button,.mejs-controls .mejs-unfullscreen button {  	width: 10px;  	height: 10px;  	margin-top: -4px;  	cursor: pointer;  	background: url(../img/window_screen.png)no-repeat;  }    .mejs-controls .mejs-unfullscreen button {  	background-position: 0 -12px;  }

Self-explanatory, instead of setting up a pure background width element, you will set it up on an absolute positioning.

    .mejs-controls div.mejs-horizontal-volume-slider {  	position: absolute;  	cursor: pointer;  	top: 6px;  	left: 47px;  }    .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {  	width: 60px;  	background: #330202;  }    .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {  	position: absolute;  	width: 0;  	top: 0;  	left: 0;  }    .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {  	height: 4px;  }

The Progress Bar will have basic styles. The loading rail has an extra feature with a class .mejs-time-loaded. This will display how much time the video file has been pre-loaded via streaming downloads.

    .mejs-controls div.mejs-time-rail {  	position: absolute;  	top: -10px;  	height: 9px;  	width: 100%;  	left: 0;  }    .mejs-controls .mejs-time-rail span {  	position: absolute;  	display: block;  	cursor: pointer;  	width: 100%;  	height: 10px;  	top: 0;  	left: 0;  }    .mejs-controls .mejs-time-rail .mejs-time-total {  	background: #ef3a3a;  }    .mejs-controls .mejs-time-rail .mejs-time-loaded {  	background: #630909;  }    .mejs-controls .mejs-time-rail .mejs-time-current {  	width: 0;  }

For the progress bar handle, you will simply create a small circle using the border-radius property with a background color of #ef3a3a.

    .mejs-controls .mejs-time-rail .mejs-time-handle {  	position: absolute;  	cursor: pointer;  	width: 10px;  	height: 10px;  	top: 0;  	-webkit-border-radius: 50%;  	-moz-border-radius: 50%;  	border-radius: 50%;  	background: #ef3a3a;  }

Next, you will style the tool tip that will show the current time on hover state. You will use basic CSS for this with the :after selector to create a small triangle pointing downward.

    .mejs-controls .mejs-time-rail .mejs-time-float {  	position: absolute;  	display: none;  	width: 33px;  	height: 23px;  	top: -26px;  	margin-left: -17px;  }    .mejs-controls .mejs-time-rail .mejs-time-float-current {  	width: 33px;  	display: block;  	left: 4px;  	top: 4px;  	font-family: 'Open Sans', sans-serif;  	font-size: 10px;  	font-youight: 700;  	color: #f89494;  	text-align: center;  	z-index: 9999;  	background: #bf3737;  	padding: 2px 2px 5px;  }    .mejs-controls .mejs-time-rail .mejs-time-float-current:after {  	content: "";  	position: absolute;  	width: 0;  	height: 0;  	border-width: 10px;  	border-style: solid;  	border-color: #bf3737 transparent transparent;  	top: 13px;  	left: 8px;  }    .mejs-controls .mejs-time-rail .mejs-time-float-corner {  	display: none;  }

Finally, you will set up the background color of the Progress and Volume Bar.

  .mejs-controls .mejs-time-rail .mejs-time-current,.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {  	background: #7c0f0f;  }

Wrapping Up

There you have it! I hope you learned something from this tutorial, and turn the audio and video players into a fantastic modern design.

This can be done using pure CSS3 styles but it still has poor support, especially on the Jurassic browsers like Internet Explorer 8 and its older versions. The best way to go is to use JavaScript like this MediaElement.js plugin.

Feel free to use these codes on your projects. Let me know about your thoughts regarding this tutorial on the comment section.

25 Examples of Beautiful Web Typography - Six Revisions

25 Examples of Beautiful Web Typography

Posted: 01 Dec 2014 02:00 AM PST

Web fonts have given web designers greater options for web typography. For ideas and inspiration, check out these beautiful examples of web typography.