Adding A Sound Logo To Your Presentation

 

Summary: You can add a sound logo by adding some javascript to the launching html file.
Difficulty: Medium

 

Branding is important for many companies, so important indeed, that in some companies there are special departments whose sole function is to verify that all products including training (internal or otherwise) complies with strict rules governing the appearance of a logo, its position, coloring, and anything else which helps to create an identify for the product or the company. One aspect of branding which is becoming more and more important is sound branding, which could be seen as the acoustic equivalent of a visual logo.

Sound Logo Title

For example, most of us know the sound logo (sometimes called the sonic logo) of Intel: Click here to listen.

So the question of course is how we can add our sound logo to the Articulate player be it Presenter, Quizmaker or Engage.  
 
Adding the sound logo to the loading page

Well one way to add a sound logo is to have it right at the beginning of your presentation, before it has even started. While it is busy loading the first few pages, and while we see the loading bar completing, why not have a little sound logo to get your users on the right track and tell them that what they are about to see if from this identifiable company? Of course, there is nothing to stop you from adding any sound jingle or message you want although you don’t want to make the audio file too large or you will have a significant impact on the loading delay before your main presentation.

Here’s a small example with Presenter.

Sound Logo Example

View Demo
 

So how do you do it?

Well, one way to do this is to add your sound logo to the html file which launches your presentation, which for Presenter is player.html, for Engage, engage.html and for Quizmaker, quizmaker.html. When your user launches the presentation via one of these files, they will also play your sound logo and launch the loader.

It is easy enough to add sound to an html file using the tag bgsound such as:

<bgsound src="soundfile.mp3">

However this does not work in Firefox.

 

Code for Internet Explorer and Firefox

So along comes some code in Javascript which generally does the trick:

Sound Audio Logo Code

Download code in text file

If you place the script above at line 319 of the player.html (after the bgcolor script) and then place your audio file (myfile.mp3 is the name of the audio file in this example) at the root level, that's to say at the same level as player.html. you should find that your loader now plays an audio file.

Presenter code position

 

Things to remember:

 

  • Use an mp3 file rather than a WAV file. Mp3 files are compressed, smaller in size and so quicker to download meaning that your sound logo will play almost immediately.
  •  

  • Notice that the audio file is references twice in the above code so be sure to change the code twice when you change the name of the audio file.
  •  

  • This change to the script must be done AFTER you have published. Republishing will delete this code so you'll just have to start again.
  •  

  • Remember to also manually add your audio file. You can add it to the root of your presentation (ie. at the same level as player.html) or you can place it in a folder. If you place it in a folder, be sure to link accordingly in the code.

This will also work in both Quizmaker and Engage.

Quizmaker

In Quizmaker, place the code above in quizmaker.html after the body bgcolor tag:

Place code in Quizmaker

Place your audio file (myfile.mp3 is the name of the audio file in this example) at the root level, that's to say at the same level as quizmaker.html.

Quizmaker Sound Logo Demo

View Demo

Engage

In Engage, place the code after the body tag:

Engage Sound Logo

Place your audio file (myfile.mp3 is the name of the audio file in this example) at the root level, that's to say at the same level as engage.html.

Engage Sound Logo Demo

View Demo

Advertisements

7 thoughts on “Adding A Sound Logo To Your Presentation

Add yours

  1. I really enjoyed this article! I’m totally appreciative of the tips and tricks you offer to make the Articulate products even more cool! I love this kind of stuff!

    And, I really like your sound logo – are you willing to share it? Just thought I’d ask!

    Thanks a bunch!
    Lisa

  2. Hi Lisa. Thanks for your comments. That sound file was actually provided as one of many resources made available with a piece of software I bought many years ago so strictly speaking I am not allowed to distribute it. However, if you look at the source file for the player.html of the demo in your browser, you will be able to see the name of the file and locate it.

  3. I successfully was able to add an audio logo to a presentation. Its cool! Thanks!

    However, I’m also experiencing something I fear doesn’t have a work around.

    I published a test audio logo onto our LMS (SCORM 1.2). When the course begins to load, it displays the infamous “this page contains both secure and non secure items”. It is as this time the audio logo plays and not during the player loader.

    Is there anyway to bi-pass this? I realize its meant to happen, but when I viewed your demo, I didn’t get that message. Is that one of the many benefits of Firefox, or is there a way to get rid of this with IE? This happens with any course I load into our LMS using AP, even without an audio logo, but now that the audio logo loads beautifully, it takes away from the cool factor.

    Any suggestions are really appreciated.

    Thanks!

  4. Hi Lisa, As you say, this happens with all your courses and not just the ones with the audiologo. IE is basically blocking ActiveX or Flash content unless you let it through. I believe you can change this via the Internet Explorer settings. It could also be something you could look at the LMS side. Not sure why it is not happening on my demos though. Would suggest that this is the LMS perhaps.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: