Category: Development

How to Play Audio on Website

HTML5 Audio and MediaElementJs

The simplest way to play audio on any website is to use the HTML5 audio tag. It’s quick and simple and only requires the following HTML code:

<audio src="your-music-file.mp3" controls></audio>

This audio player is native to whichever browser you are using, so will look different in appearance and size on Firefox vs Internet Explorer vs Android Chrome vs IOS iPhone, etc. And if your browser doesn’t support the audio tag then you will not see any player at all and no music will play. The example below uses the default HTML5 audio code above.

Depending on what music format you are using – mp3, m4a, ogg, wav, wma – you will find out that not every browser supports every format. So what you can do is include multiple formats:

<audio controls>
<source src="your-music-file.mp3" type="audio/mpeg"/>
<source src="your-music-file.wav" type="audio/wav"/>
<source src="your-music-file.ogg" type="audio/ogg"/>
</audio>

*Note: You could even support older browsers by using the “object” tag or including a direct link to download the music file.

Besides the “controls” and “src” attribute, you can also add in “autoplay”, “loop” and “preload”. If using “preload” you’ll need to specify a value (none, metadata or auto). So for example if you wanted the music file to autoplay, loop and preload, you would use:

<audio src="your-music-file.mp3" controls loop autoplay preload="auto"></audio>

What about for WordPress websites?

Well all of the above still works, but as of WordPress 3.6 you have another option. WordPress now comes equipped with MediaElementJs files that will load on your page if you use the WordPress audio shortcode [audio] to play your audio file. This produces a nice new audio player, though not a lot of customisation options, but very useful as it looks the same on different browsers and devices, unlike the native HTML5 audio player which appears differently on each browser.

To use the shortcode, you can simply upload the music file to your WordPress media library using the “Add Media” button, then add onto the page selecting the “Embed Media Player” option. This will add the shortcode to the page like this:

[audio mp3="your-music-file.mp3"][/audio]

As noted there is not much in the way of options for this shortcode, however you can use loop=”on”, autoplay=”on” or preload=”none|auto|metadata”. Also you have the option of including different formats like this:

[audio mp3="your-music-file.mp3" ogg="your-music-file.ogg" wav="your-music-file.wav" ][/audio]

To simplify even further, you can simply paste the url to the music file on a line all by itself and WordPress will recognise the audio file and play it in the audio player. This even works with external music files. Note that the music formats supported are ‘mp3’, ‘m4a’, ‘ogg’, ‘wav’, ‘wma’. Here is a screenshot of what the WordPress audio player looks like:

WordPress audio player

Print a nice copy of this page for reference



For further information about using the included WordPress audio player view the WordPress codex page – http://codex.wordpress.org/Audio_Shortcode

Adding MediaElementJs manually

Depending on your needs for your audio player you may wish to setup your own MediaElementJs files, so that you can customise the player further. Note that the following is not necessary in most cases but here is how to do it if you want more control.

Step 1.
Download and extract mediaelement files from http://mediaelementjs.com/

Step 2.
Copy the “build” folder and paste into the “js” folder in your childtheme (setup a new folder if you don’t have one already). Rename the “build” folder as “mediaelement”.

Step 3.
Delete any files you don’t need. The most important ones to keep are flashmediaelement.swf, mediaelement-and-player.min.js and silverlightmediaelement.xap, as well as the css and image files.

Step 4.
Create a file called mediaelementjsplayer-scripts.js, paste the following javascript in, then upload to your “mediaelement” folder.

jQuery(document).ready(function($) {
    //customise settings and target jquery selector
    $('#audio-player').mediaelementplayer({
        features: ['playpause','volume','current','duration'],
        audioVolume: 'vertical',
        audioWidth: 160,
        audioHeight: 30,
        iPadUseNativeControls: false,
        iPhoneUseNativeControls: false, 
        AndroidUseNativeControls: false,
        alwaysShowHours: true
    });
});

Step 5.
Register the scripts and styles ready for enqueue in our new audio shortcode – add this to your childtheme’s functions.php file or your mu-plugin file.

function mediaelementjs_enqueue() {
    wp_register_style('mediaelementjsplayer-css',get_stylesheet_directory_uri().'/js/mediaelement/mediaelementplayer.css');
    wp_register_style('mediaelementjsplayer-skins',get_stylesheet_directory_uri().'/js/mediaelement/mejs-skins.css');
    wp_register_script('mediaelementjsplayer',get_stylesheet_directory_uri().'/js/mediaelement/mediaelement-and-player.min.js',array('jquery'),'',true);
    wp_register_script('mediaelementjsplayer-scripts',get_stylesheet_directory_uri().'/js/mediaelement/mediaelementjsplayer-scripts.js',array('mediaelementjsplayer'),'',true);
}
add_action('wp_enqueue_scripts','mediaelementjs_enqueue');

Step 6.
Now we’ll create our new audio shortcode, add the following php also to your file, just under the enqueue function in step 5 above.

function mediaelementjs_newplayer($atts, $content=null) {
    $audioplayerdata = shortcode_atts(array(
        'music_src'=>'',
        'music_type'=>'mp3',
        'music_preload'=>'metadata',
        'music_loop'=>'',
        'music_autoplay'=>'',
        'music_class'=>''
    ),$atts);
    wp_dequeue_style('wp-mediaelement');
    wp_dequeue_script('wp-mediaelement');
    wp_deregister_style('wp-mediaelement');
    wp_deregister_script('wp-mediaelement');
    wp_enqueue_style('mediaelementjsplayer-css');
    wp_enqueue_style('mediaelementjsplayer-skins');
    wp_enqueue_script('mediaelementjsplayer');
    wp_enqueue_script('mediaelementjsplayer-scripts');
    $m_src=$audioplayerdata['music_src'];
    $m_type=$audioplayerdata['music_type'];
    $m_preload=$audioplayerdata['music_preload'];
    $m_loop=$audioplayerdata['music_loop'];
    $m_autoplay=$audioplayerdata['music_autoplay'];
    $m_class=$audioplayerdata['music_class'];
    return '<div class="playeraudio"><audio class="'.$m_class.'" id="audio-player" src="'.$m_src.'" type="audio/'.$m_type.'" '.$m_autoplay.' '.$m_loop.' preload="'.$m_preload.'">'.$content.'</audio></div>';
}
add_shortcode('my_audio_player','mediaelementjs_newplayer'); 

This shortcode function setups up the new audio player shortcode, adds the required scripts and styles to the page that the shortcode appears on, while also removing the WordPress MediaElementJs files from being added to the page.

Step 7.
Use the new audio player shortcode:

[my_audio_player src=”your-music-file.mp3″]add support here for older browsers if required[/my_audio_player]

Besides the src of your music file, you can also specify other settings such as:

  • music format type using music_type=”wav|ogg|mp3″; the default is “mp3”
  • music preload using music_preload=”none|metadata|auto”; the default is “metadata”
  • music loop using music_loop=”loop”; the default is none
  • music autoplay using music_autoplay=”autoplay”; the default is none, note also that mobile devices prevent autoplay
  • music class using music_class=”mejs-ted|mejs-wmp”; the default is the standard skin

Also you can style the width and position of the player by adding css to your stylesheet.css file. It’s a good idea to make the css width and height match up with the mediaelementjsplayer-scripts.js files settings for audioWidth and audioHeight.

.playeraudio {
     width: 160px;
     height: 30px;
     margin: 20px auto;
}

Here is how the new player looks using the “mejs-ted” class:

[my_audio_player music_loop=”loop” music_class=”mejs-ted” music_src=”https://www.davidtiong.com/wp-content/uploads/2015/02/music-example.mp3″ music_type=”mp3″][/my_audio_player]

Step 8.
For more information about using mediaelement.js and customisation options, visit http://mediaelementjs.com/



Final Thoughts…

It is a good idea to use the WordPress audio shortcode if possible, as this is the simplest and quickest way to add audio onto your webpages. Also because it uses MediaElementJs and is included with WordPress, it will stay up to date as you update your WordPress in the future. However at the moment the customisation options are limited, so you if you need more flexibility then you are welcome to test out the new MediaElementJs player above.

Filed under: Development, WordPressTagged with: , ,

How to use FTP to transfer files to your website

As a web designer who uses FTP everyday, it’s really easy to forget that often website owners and bloggers may have never used FTP and so it may be confusing when someone like me says “just FTP the new stylesheet or functions file to the website”.

A client just pointed that out to me the other day. So I have included information in this post on how to use FTP, along with a link to an easy to use FTP tool to help manage your website files.

Additionally at the end of the article is an option to purchase a 40 minute tutorial video, for the cost of a cup of coffee here in Australia, in which I show the process of how you can use Filezilla, Notepad++ and 7zip to manage your website files, including backing up the files, updating files and using FTP to transfer files between your local computer and your website.

FTP is a way to transfer files between your local computer and your website server. It’s fast and effective.

FTP, or File Transfer Protocol, is a method of connecting to your website server from your local computer, to allow the transmission of files back and forth, between the two.

So if you have modified your stylesheet.css on your computer and you want to put that updated file to your website, then you use FTP. If you are using a backup plugin on your website and it has created a backup file, then you can use FTP to get that file from your web server, and add it to the local copy of your website files.

Possibly one of the easiest to setup and use, is Filezilla which you can download from here. Once you download and install the file, setup your first site:

1. Select New Site

2. Enter your domain name in the Host field.

3. Enter your cpanel username in the User field

4. Enter your cpanel password in the Password field.

Then connect to your website.

using Filezilla for FTP

You can find out more about connecting to your website with Filezilla, from your hosting provider. Inside your website hosting cPanel is the option to setup additional FTP accounts, and if possible you may want to connect using SFTP (change the Protocol field shown in image above). To find out if SFTP is available, simply contact your hosting provider, or check their FAQ and Documentation pages.  You will also need to enter the Port number if using SFTP.

When on the site manager screen as shown in image, you may want to switch across to the Advanced tab and setup a couple more settings:

1. Select a default local directory. This is the folder on your local computer where your copy of website files is stored.

2. Select a default remote directory. In this field you want to enter the path to your public folder on your web server. So this is where the files are stored that are viewable on the website. Often this is simply /public_html, however you can verify your folder name with your hosting provider.

how to use FTP

Now that you are connected, you will see 2 columns as shown in the image below. On the left hand side are your local files on your computer’s hard drive (so what you see here will depend on what files you have on your hard drive). On the right hand side are your remote files (so the files that are on your web server).

 

local files and remote files via ftp
 
 
You can drag files between the 2 columns, to transfer files to and from your website. Just remember that if you overwrite a local file with a remote file (or vice versa) then you are replacing that file.

This means that if you do not have a backup of the original file, then it is gone. So when you are using FTP you do want to be careful and mindful of what files you are replacing or changing, as any mistakes could result in messing up your website.

I always recommend that you put in place a backup system to ensure you have backups of all your files. In the video tutorial I go through a simple procedure, where you can compress and download your website files from your web server before starting to use FTP.

I would also recommend that you use a good backup plugin to backup your website files and your WordPress database files on a regular basis. At least that way if you ever make a mistake, or if something happens to your website, you will have backups to go to.

So there are some simple steps above to start using FTP to transfer your modified files to your website. For more information the 40 minute video tutorial is available below:

– purchase no longer available. Members can view the video below.

Premium Club Members can view video below:

This content is for members only.
Log In Register
Filed under: Development, WordPressTagged with: , ,

Compress websites files using PHP to download

A quick way to download a website’s files using FTP, is to compress them at the server, and then download. You can do this by adding a quick and easy PHP compression script to your website, if you have access with FTP.

<?php
exec('tar zcf compressedbackupwebsite.tar.gz *');
?>

Create a PHP file called “compress-files-for-ftp.php” and add the above code into it; then upload to the public_html directory of your website, or whichever directory that you wish to compress.

Simply then run the script by loading YOUR-DOMAIN-NAME.com/compress-files-for-ftp.php in a browser URL address bar. This will trigger the script and create a new file called compressedbackupwebsite.tar.gz.

Refresh your FTP client and then download compressedbackupwebsite.tar.gz, then you can use a Zip tool like 7-Zip to extract the tar file, then extract further to extract the individual website files.

Now you will have a backup of all the files from the website.

Note that this won’t backup files that are dot files such as .htaccess files, which you will have to download manually. It also won’t backup the database files- if you have a WordPress website for example.

Be sure to delete both compressedbackupwebsite.tar.gz and also compress-files-for-ftp.php, off your website when you are finished.

Important Note: *this procedure will not work if exec has been disabled in PHP for your server.

Filed under: DevelopmentTagged with: , ,

Redirect old website pages to new website pages

When you create a new website for a client, or yourself, it’s important to consider the current pages that are indexed by Google and other search engines.

Why? Because you currently have certain pages that are important, that people are finding when they search online for you. They may even have certain pages bookmarked off your website in their browsers. You don’t want to lose the ranking for those pages.

So what you need to do is simply identify the key pages that are currently being indexed on Google, either by looking at your sitemap in Google webmaster tools, or by doing a search for your website on Google.

Then you implement a 301 redirection in your .htaccess file, and advise where to go when they no longer can find your old pages.

So for example if your old URL for a contact page on your website was “domainName.com/details/contact-me.html” and your new website’s URL for the contact page is “domainName.com/how-to-contact-me”, then you would add the following:

Redirect 301 /details/contact-me.html http://domainName.com/how-to-contact-me

Now if someone clicks on the old link in SERP or in their browser bookmarks, then your new page will load up, instead of ending up on a 404 not found page.

You can do this for as many important pages that are indexed as you want. However don’t do it for the home page or the index page as it will cause a redirection error.

Instead you can use the following to redirect index.html to your website home page:

Options +FollowSymLinks
RewriteEngine On
RewriteCond %{THE_REQUEST} ^.*/index.html
RewriteRule ^(.*)index.html$ http://domainName.com/$1 [R=301,L]

An important note in the case of WordPress websites, is to add these rules before the WordPress rules.

Filed under: Development, WordPressTagged with: , ,

How to create email forms

Email forms are an essential communication tool for today’s digital age. Whereas once upon a time the preferred method of contact was by phone or fax, now it is by email and live chat.

Of course picking up the phone and calling is still an excellent method for communication, the problem is that it is not always convenient. Here’s some of the reasons why email is so popular:

 

  1. You can send an enquiry or a response at any time of day or night
  2. Email provides the option of extra details and information to be transmitted
  3. Email can be sent out to many people in an instant
  4. Email is very cost effective
  5. You can setup email forms to find out specific information
  6. Email can be saved and referred back to as needed
  7. Email can be automated
  8. Integration of email with contact management allows for small businesses to track clients
  9. Email can be used to promote, advertise and build lists

On your website it is important to provide contact details so that people can email you. My suggestion is that you incorporate an email form on your website rather than simply providing an email address. There are 2 important reasons for this. Firstly a form will allow you to specify what contact details and enquiry details you want from your client. Secondly, and this is very important, you don’t want email searching bots to come along and grab your email address, because in no time at all you’ll end up with lots and lots of spam emails from all over the globe.

So what are your options for creating email forms.

  1. If you know some html and php code, you can create your own forms, and with a bit of css, suit them to your site’s needs. You can also search google and quickly find some samples, though they often need to be adapted to work properly for your needs, and can be confusing if you are not familiar with the code.
  2. Are you using wordpress or another blogging platform? If so then you can search the recommended plugins and find some that will easily add forms to your site. Some that I have used before and find easy to setup and customise include: Contact Form 7, FormBuilder and Fast Secure Form.
  3. Try a hosted service. The advantage of this method is that the software solutions are often designed to be quick and easy to install yourself. As well they offer anti spam, customisation and most importantly integration with other services such as email list building. There’s usually support available if you need, and tutorial videos. I’m trialling ContactMe at the moment on some websites and have found it very good so far. It’s easy to create a form and to place the button code onto a page. They offer a free option, or you can pay for an upgrade to get extra features and forms.
Filed under: DevelopmentTagged with: