Audio On The Web

Enhance Your Client's Web Experience



The potential for video and audio to augment your site is immerse. However, implementation needs some judicious and careful thinking on how this resource will be consumed by your audience. Thus, the objective of the site or page where the audio files are embeded, will have a significant bearing on how the interface and user interaction are designed.



Audio

Up to now, playing audio in a web browser has been a bit of a black art. Traditionally there are several ways to embed a sound in a web page — some work better than others, and many only work if you happen to be using the right browser with the right plugin.
The ubiquity of the Flash plugin has helped to a large extent, since Flash makes it easy to embed audio in a way that works with most browsers. However, this doesn't help with browsers such as Safari on the iPhone and iPad, which don't support Flash at all.

Fortunately, HTML5 looks set to make life easier for us developers, thanks to its audio element. This element lets you embed an audio file in a web page, as well as control playback of the sound using JavaScript. More importantly, it doesn't require any plugin to work, and is supported by nearly all modern web browsers.

First and foremost the audio is there to enhance the experience of the user. Thus, they should not be intrusive. One of the easiest ways to use sound is to trigger the playback of a music file as the page loads - this should not be too evasive as to be more of a distraction. Current net etiquette strongly advocates that the user should be in control of all aspect of the sound as demonstrated here. Note the sound file embeded in this page at the top of the right column. You have to click the play control to get it to play.

Prior HTML5, if you wanted to embed an audio file into your web page, you had to use a third-party plug-in such as Flash Player. For example, to embed an MP3 audio file in your web page and make it available via Flash Player, you might use the following code:

<object type="application/x-shockwave-flash"
data="player.swf?audioURL=myAudio.mp3&autoPlay=true"
height="27" width="320"> <param name="movie"
value="player.swf?audioUrl=myAudio.mp3&autoPlay=true">
</object>
.

Using HTML5, you can be more succinct:

<audio src="myAudio.mp3" controls autoplay></audio>


This snippet of HTML5 code achieves the same result as the more verbose code for Flash Player: It embeds an audio file into a web page to play automatically. You can see just how much easier and neater HTML5 code can be.


Audio codecs:


The HTML5 specification initially had made support for the Ogg Vorbis codec mandatory, but Apple and Nokia's challenge put an end to this. Browsers today support more audio codecs than video codecs, so you have more choices when deciding what to use:
  • Firefox supports Ogg Vorbis and WAV.
  • Safari supports MP3, AAC, WAV, and MP4.
  • Internet Explorer 9 supports MP3, AAC, and MP4.
  • Opera supports Ogg Vorbis and WAV.
Chrome supports all of the above. To cover all browsers that support HTML5 audio, you need to serve your audio in only two different formats: Ogg Vorbis and MP3. It's not advised to use the WAV file format as it doesn't compress very well if at all and therefore the file size can be quite large.



Using the source element


As noted earlier, you'll need to provide audio files for at least two different codecs to cover all browsers that support HTML5. You use the source element to accomplish this.
An audio element can contain multiple source elements, so you can provide your audio in multiple formats. Extending the previous example, you can specify both an Ogg Vorbis and MP3 source for the same audio content as follows:

<audio autoplay controls>
<source src="myAudio.ogg" type="audio/ogg">
<source src="myAudio.mp3" type="audio/mp3">
</audio>

When the browser parses the audio element, it will proceed through the list of source elements sequentially until it finds a file format that it can play. Once it does, it plays it and ignores any subsequent elements.
In this case, Firefox and Opera would play the Ogg file. Chrome would also play the Ogg file, even though it is also capable of playing the MP3 file. Safari and Internet Explorer 9 would play the MP3 file.

Legacy fallback:


Not everyone uses a browser that supports HTML5. Older versions of Internet Explorer (version 8 and below), for example, are still quite popular.
To support users who are using these browsers, you can use a third-party plug-in such as Flash Player to embed audio files, just as you would have before the arrival of HTML5 and native multimedia.
Browsers disregard what they don't understand, so your HTML5 audio and source elements will be completely ignored by older browsers such as Internet Explorer 8. For example, you might use the following code to add a link to the audio file:

<audio autoplay controls>
<source src="myAudio.ogg" type="audio/ogg">
<source src="myAudio.mp3" type="audio/mp3">

Older browsers will simply display the "Download the audio file" link and ignore the rest. To add fallback support via Flash Player (as well as the download link) you can use the following code:
<audio autoplay controls>
<source src="myAudio.ogg" type="audio/ogg">
<source src="myAudio.mp3" type="audio/mp3">
<object type="application/x-shockwave-flash"
data="player.swf?audioUrl=myAudio.mp3&autoPlay=true">
<param name="movie" value="player.swf?audioUrl=myAudio.mp3&autoPlay=true">
</object>
</audio>

As you must have seen from above, browser compatibility is still an issue designers should be aware of when using sound on the web. The problem is as always with the implementation of standards within different browsers. Flash again comes to the rescue if you want all your audience to play or listen to audio files.

For All You AudioFile Out There

As demonstrated in the preceding section, audio on the web has come a long way. Are you a budding musician who wants to expose his or her tunes to the public in a format that you have total control i.e. they might be listened to online or be downloaded as MP3 files or any other format you prefer. Podcasting is another form of expressing yourself on the web. If what you say can be recorded then it can be broadcast on the web to a potential audience of millions. But that is only the beginning. Host it on a streaming server and you just about start to realise the potential of the web - because that in essence is radio broadcasting on the internet. Anyone log on to your site from Timbuktu to Tokyo will hear what you have to say.

Audio on the web just as video has come up in leaps and bounce. One thing that is certain though, is that it is now a lot easier to incorporate video and audio on web pages without using expensive software. What ever your reasons, we have the expertise to design a bespoke interface to satisfy your needs. Talk to us







Our Most Recent Projects

Please do note that the clients listed below all came to us as a result of personal recommendations. They very much new nothing about the web let alone the fundamental technologies involved. One thing the knew for certain was that it is where everything is happening. They needed someone to take their ideas and make it happened so to speak on the web - And that's what we do here at ToromeTech.

Click on the vertical tabs on each client 's section to see how the sites were designed

Website Design - Project1

    Salient Features: Click on tabs to see content:

Ezeogu Publication

Preserving Igbo Heritage

Their Objectives:

We are here to take you on a journey to discover and appreciate not only the Igbo language but also the culture to which it gives expression

  • To contribute our bit to the crusade for the preservation of Igbo language and culture
  • To bring the Igbo language to all Igbo children growing up in the Diaspora who are eager to connect with their heritage language
  • To provide a tool and to be of assistance to anyone (Igbo and non-Igbo alike) who has a genuine desire and interest in learning to read, write and speak the Igbo language
  • To create awareness on the current state of the Igbo language and the need to preserve it for the future generations

The Brief

A Complete Responsive Design

General theme should exude subtle colours and large expanse of margins and paddings that depict an uncluttered interface

  • Published Books will be sold on site
  • An interactive flash design game will be played on the site on a subscription basis
  • A dynamic content page showing Igbo phrases and their English equivalent
  • A dynamic picture gallery page

The Design Process

From Wire-frames To HTML5

In the design process, the business imperative as narrated by the client is of the essence. This is why they've come to us. Our design methodology is encapsulated in these four phases: Discovery - Design - Deployment - Delivery. Each of these consulting phases, defines a clear step in the process of taking the solution of a business problem from concept into production. The client is alway in tune with what is going on. This facilitate a smooth transfer of control after completion.

  • A wire-frame mock-up of the interface is the starting point
  • Basic graphic assets are added into mocked design to improve visual for client to get a handle
  • intended graphic assets from client are then modified and edited in Photoshop to attain proper dimensions and resolution as per design
  • Responsive design is implemented with a skeleton backbone of components from Bootstrap framework
  • Various CSS3 style sheets are created to render the HTML pages with the desire effects
  • Java-script files are created to drive the front-end interactions
  • PHP script files are created to power the back-end applications

Progressive Development

Client's Input At All stages

To effectively bring the client in to the design and development processes, a common venue had to be established. The most convenient and suitable location was the internet. thus, a private area was setup where client can log in and see how development was progressing. More importantly here,they could query issues they were not happy with and the development team can respond for them to see the immediate effect of their suggestions -

    Advantages
  • Very convenient for both parties
  • Significantly reduce glitches and typos
  • improved client satisfaction

Delivery

Deployment

This final stage of the design cycle was rather straight forward because it is invariably dependent on the preceding phases. Thus it was merely transferring the entire package from it testing platform on to a production one. Here, the databases for managing both the on-line book selling functionality and administering access to the on line Interactive Audio Application were implemented and tested. Paypal was the obvious choice for completing the e-commerce section due to it simple and intuitive modules.

Final Features

  • Site with interface as envisaged by client and then some
  • Java-script providing intuitive interactive elements at the front-end
  • Publish Book can be bought on site
  • Interactive - Audio Media can be played on site with access control
  • Client has total control of back-end activities













Website Design - Project2

    Salient Features: Click on tabs to see content:

Fabu Publishers

Publishing Books With Moral Values

Their Objectives:

Fabu Publishers is a Foundational Publishing house based in London. We have developed into a leading publisher of historical, cultural, educational and religious publications to name but a few. Our books focus particularly on fostering a better world order and promoting self-transformation. Our themes are Self-awakening irrespective of your denomination. Foundational thoughts are not merely academic but real food for thought for the discerning.

The Brief

A Complete Responsive Design & Branding

General theme should exude a bright colour specified by client

  • A dynamic book display gallery on home page
  • E- commerce integration
  • Published Books will be sold on site
  • A means of subscribing to weekly news letter from home page
  • A dynamic detailed content page showing main attributes for each book
  • A blog and news section

The Design Process

From Wireframes To HTML5

Our design methodology is encapsulated in these four phases: Discovery - Design - Deployment - Delivery. Each of these consulting phases, defines a clear step in the process of taking the solution of a business problem from concept into production. The client is alway in tune with what is going on. This facilitate a smooth transfer of control after completion.

  • Mapping - A wire-frame mockup of the interface is the starting point
  • Mapping is very subjective due to the fact that your personal feelings (emotions) and experiences are the driving force. It starts from your brain where you envisage how everything will be positioned in a given time - space disposition.
  • The transfer of these brain concept on to paper (mockup) is the starting block for the interface to come into realization
  • Basic graphic assets are added into mocked design to improve visual for client to get a better visualization

Progressive Development

Client's Input At All stages

To effectively bring the client in to the design and development processes, a common venue had to be established. The most convenient and suitable location was the internet. thus, a private area was setup where client can log in and see how development was progressing. More importantly here,they could query issues they were not happy with and the development team can respond for them to see the immediate effect of their suggestions -

    Advantages
  • Very convenient for both parties
  • Significantly reduce glitches and typos
  • improved client satisfaction

Delivery

Deployment

This final stage of the design cycle was rather straight forward because it is invariably dependent on the preceding phases. Thus it was merely transferring the entire package from it testing platform on to a production one. Here, the databases for managing the on-line book selling functionality , contact form , newsletter, blog and news functionalities were implemented and tested. Paypal was the obvious choice for completing the e-commerce section due to it simple and intuitive modules.

Final Features

  • Site with interface as envisaged by client and then some
  • Java-script providing intuitive interactive elements at the front-end
  • Publish Book can be bought on site
  • A blog section
  • A news section
  • A news-letter section
  • Company stationery consistent with wed interface
  • Client has total control of back-end activities









Website Design - Project3

    Salient Features: Click on tabs to see content:

The Nigerian Community

Joining The Motion

Their Objectives:

The Nigerian Community Waltham Forest (NICOWF) is a charitable organisation born out of the necessity to foster and strengthen the bonds among Nigerians living in the borough

  • Strengthening Capacity For Self-Help
  • Providing Economic Opportunity
  • Delivering Relief In Emergencies
  • Influencing Policy Decisions At All Levels
  • Addressing Discrimination In All Its Forms

The Brief

A Complete Responsive Design

The general theme should reflect the national colours (GREEN-WHITE-GREEN ) with large expanses of margin and padding that depicts an uncluttered interface

  • Lots of videos will be shown on site
  • Lots of pictures will be shown on site
  • Details of Nigerian embassies in the diaspora
  • Useful public information from the The High Commissioner s Office in London
  • A dynamic blog and news section
  • An opened architecture for accommodating new features

The Design Process

From Wire-frames To CSS3

There are multitude of different screen sizes across phones, tablets, desktops and TVs,. Screen sizes will always be changing, so it’s important that your site can adapt to any screen size, today or in the future. Responsive web design, responds to the needs of the users and the devices they’re using. The layout changes based on the size and capabilities of the device. For example, on a smart-phone, users would see content shown in a single column view where as a tablet might show the same content in two columns.

The fundamentals of the responsive design concept is based on a grid structure made of columns. A maximum of 12 will be utilized to display content for a typical desktop and anything bigger (TV). Tablets , smart-phones and smaller screen devices will use progressively less. The magic in rendering the same content for devises of varying screen resolution and sizes is in the css file (CSS - Cascading Style Sheet)

  • Mapping - A wire-frame mockup of the interface is the starting point
  • Mapping is very subjective due to the fact that your personal feelings (emotions) and experiences are the driving force. It starts from your brain where you envisage how everything will be positioned in a given time - space disposition.
  • The transfer of these brain concept on to paper (mockup) is the starting block for the interface to come into realization
  • Basic graphic assets are added into mocked design to improve visual for client to get a better visualization

Progressive Development

Client's Input At All stages

To effectively bring the client in to the design and development processes, a common venue had to be established. The most convenient and suitable location was the internet. thus, a private area was setup where client can log in and see how development was progressing. More importantly here,they could query issues they were not happy with and the development team can respond for them to see the immediate effect of their suggestions -

    Advantages
  • Very convenient for both parties
  • Significantly reduce glitches and typos
  • improved client satisfaction

Delivery

Deployment

Final Features

  • Site with interface as envisaged by client (based on the Nigerian Flag)
  • Java-script providing intuitive interactive elements at the front-end
  • Dynamic Photo Album
  • Dynamic Video Player
  • A Blogging Section
  • A News Section
  • Client has total control of back-end activities















Be Properly Informed

 

Publishing no more a privileged few

The main broadsheet and television to a certain extent have always argued that the principle of reviewing books that are only published through well-renowned publishers had inbuilt quality control they could not do without. It now seems the quality control factor was merely a smoke screen for maintaining the old school boy network. This hitherto sacrosanct principle is now being reviewed,revised or ditched completely. There now seems to be a change in the wind - or to put it bluntly a revolution in the making. As more self-published authors hit the big time, that reputation (of vanity,flagrant ego etc,etc.) is definitely beginning to diminish. Self-published authors are now thought of as entrepreneurs, energetic souls determined to forge their own identity and destiny in the cultural landscape.


Anyone can get published

Here at Torome Tech, we have the expertise to help you bring your dreams to fruition. it is generally said that, everyone has got a book in their head. Be it fiction or non fiction. The problem has always been the expense in getting it published. Well to a certain extent that obstacle has been rendered obsolete. Not because of the caprices of the big publishing houses but due to innovation in technology and the increasing power designers and programmers have in affecting how information is presented and consumed on the Internet platform. Thus you do not have to have a physical book so to speak(i.e printed) . Your book will reside on the internet to be consumed in a digital format only. That is to say people can read it online on their chosen platform (Tv,desktop,laptop,tablet, or smartphone). You can give it gratis or incorporate a charging scheme of your choice.This by and large, will be on a pay-access basis. Just in case you are one of those averse to digital books, the tangeable option can easily be realised from this juncture. You just have to say the number of copies you want and it get send to the printers - and that is it. You only need to have your story out of your head and we will do the rest. Interested - talk to us.


Blog Posts On Site Design

Our Blog Post



Search our Blog



Recent Posts

Categories

Archive