Knowledge Base / FAQ/User Guides

symSound Audio Stacks User Guide

Kevin
posted this on December 17, 2010 09:16

The key steps covered in this article...

We are pleased to announce the next release of our symSound Family of Audio Stacks, in addition to releasing a new addition to this Audio Stack Collection.

Whilst the look and feel may seem the same to the first releases made in 2009, under the hood all the code has been rewritten in addition to supporting:
* iPad and iPhone native playback, this is huge as the previous release was Flash based
* MP3, AAC media types now playable across all browser formats

If you have never used our Audio stacks before? We take an add once approach and all the magic is performed behind the scenes to generate the audio players. All you have to do is add links to audio files as we search the page for audio, yes you can even have an audio player in the Sidebar with our Stacks too.

So let me take you on a tour of using the stacks and show you all the Stacks Options available as to how these look on your web page

How it works

The video above gives you an idea as to how easy the symSound stacks are :)
When you have placed any of the symSound Stacks in a Rapidweaver Stacks page , these will start 'hunting' for audio files to play . Once you publish and/or view your published web page the audio files are rendered with the Audio Player whether this is Spin, FatDeck, Linear or PlayButton Stack.

HTML 5 native Audio Playback is available for : Mobile Safari (iPhone, iPad) and Pre.
All other browsers will see the player but will use Flash to take care of playing back the audio file.

Our symSound Audio use no jQuery just pure Javascript, this is mainly for speed. You will need at the minimum the Stacks Plugin 1.3.x (from YourHead.com) to use these Stacks and last of all you only need to add any of these audio stacks add-ons once in your Stacks Page to get an audio player in your web page up and running in no time at all.

Using the Stacks

?name=Using_the_Stacks.jpg

All of our symSound Audio Stacks work in the same priciple of add once and forget . We take care of all hard work for you !
All you need is
1. Content with Links to your Audio files ( these can be assets/resources or ideally stored on your web server)
2. Add one of our symSound Stacks

3. Next we will click on (3) the Stack Inspector to view the options of each of the Stacks.

Options - Spin Audio Player

?name=Options_-_Spin_Audio_Player.jpg

1. Loading Track Color
2. Playing Color
3. Ring Background
4. Text Hover Color
5. Text hover Background Color
6. Play next track ( as these are rendered in the page it is in a sequential order)
7. AutoPlay
8. Disable the timer
9. Timer font color in playback

Preview - Spin Audio Player

?name=Preview_-_Spin_Audio_Player.jpg

Spin Player gives you a circular loader animation

Options - FatDeck Audio Player

?name=Options_-_FatDeck_Audio_Player.jpg

1. Player Link Background
2. Player link Text color
3. Playing Font Color
4. Playing Background
5. Paused Font Color
6. Paused Player Background
7. Hover Font Color
8. Hover Background
9. Playing Status Bar
10. Status Bar Loading
11. StatusBar Paused.
12. Play Next Track ( as they are in page rendered order sequentially)
13. AutoPlay

Preview - FatDeck Audio Player

?name=Preview_-_FatDeck_Audio_Player.jpg

A big player to really make a statement on your web page :)

Options - Linear Audio Player

?name=Options_-_Linear_Audio_Player.jpg

1. Link Text Color
2. Link BackGround
3. Pause Text Color
4. Pause Background
5. Playing Text Color
6. Playing Background
7. Hover Text Color
8. Hover Background
9. Width of player (max 480px, this is suitable for page content areas and adjustable for sidebars too)
10. Play Next Track
11. Autoplay

Preview - Linear Audio Player

?name=Preview__-_Linear_Audio_Player.jpg

Clean looking with CSS color control and effects.

Options - PlayButton Audio Player

?name=Options_-_PlayButton_Audio_PLayer.jpg

1. Button (not Playing) Color
2. Hover and Playing Color
3. Paused Color
4. Play Next Track
5. Autoplay

Preview - PlayButton Audio Player

?name=Preview_-_PlayButton_Audio_Player.jpg

Yes, that little button is the Audio Player control. Clicking on this the button rotates to indicate it is playing.

Make the link to your audio file (part 1)

?name=Make_the_link_to_your_audio_file__part_1_.jpg

Select the text you want to link to the audio file in your resources or stored on your web server
In linear player this is visible as the track title

Add Link

?name=Add_Link.jpg

Use the add link button

Enter the url/location to your Audio

?name=Enter_the_urllocation_to_your_Audio.jpg

Enter the url to your warehoused audio or if you use assets/resources then select this
If you have added the files as assets via page inspector this will be available in the add link dropdown menu

Resources - File Types Supported

All the new symSound Audio Player Stacks Support the following file types:
MP3 ( no variable bit rate as you might run into problems with Flash Playback, we have to sometimes play by Adobes rules too)
mp4 audio file extensions M4A and AAC - Not DRM protected audio.

Resources - Playback problems

All problems with playing back audio can be related to the following scenarios:

The link to audio file is not correct
Can you open the audio file url in a browser ? If not then check this otherwise there is no audio playback :)

Link is correct but I cannot play audio
If you open the audio url in a browser and you get a download prompt ( Firefox is best for testing this) 9 times out 10 this is related to incorrect mime- types for your audio track on your server.
Check with your hosting provider first of all as there are too many hosting providers for us to keep track of and know all their individual nuances.
Here is a handy guide to Mime Types in general http://en.wikipedia.org/wiki/Internet_media_type

Resources - I have the previous versions of this What Do I do ? (in other words I have the old Flash version)

These new versions have been completely rewritten . Any pages you have with the old versions should have the old stack removed and the new symSoundman stack of your choice insterted.
You will need to do a re-publish ( or even a re-publish all) to ensure all scripts and css have been updated for the page/site.

Questions - Can I use in other pages than Stacks

Yes, using the Pluskit Plugin from Loghound is what we use here

Question - Can I have the same audio playing in other pages

Sorry, not yet the player and audio is fixed to the page you are viewing 'in-state' .

 

Comments

User photo
Kevin
SymfoniP

Mani

Generally yes, however we know from experience that not a lot of folks can be bothered with OGG . 

Take  the KISS approach :)

March 08, 2011 08:34
User photo
Mani

Hi Kevin!

What is the KISS approach? It is very urgent and I would pay extra if it would work!

Thanks Mani

March 08, 2011 08:38
User photo
Kevin
SymfoniP

http://en.wikipedia.org/wiki/KISS_principle

We have something else in our roadmap that will take care of this . however we have other projects and resourcing planned for March and April. 

March 08, 2011 08:43
User photo
Yannick Paget

Hello,

Is there a possibillity to change the height seize or the font size (really too big) of the fatdeck player?

Thank you for your support.

All the best

May 08, 2011 12:35
User photo
Aux Kang

Hello,

Why is that symSound-Spin V2 don't work in ie 8 or 9. In safari works great.

Thank you for your support.

August 09, 2011 08:10
User photo
Jeff Ainsworth

Hey Kevin,

is this working with stacks 2? I just purchased it but it's not working?

February 20, 2012 05:22
User photo
Richard Roberts

Hi Kevin

I have a similar question to that above... does symSound-Spin V2 function in Stacks 2?

It works well on my old set-up.. RW4 and Stacks 1.?.. but no joy in RW5 and Stacks 2

Any help would be appreciated.

Thanks in advance

Richard

April 10, 2012 23:03
User photo
Kevin
SymfoniP

Hi Richard
All our demo sites now use Stacks 2 and RW5 so yes symSound works as it should in Stacks 2

If the problems are in preview mode this will be related o Flash Permissions, otherwise open a support ticket with the following
- details of your test page online
- and the link to the audio track

April 11, 2012 12:42
User photo
Jasper Staps

Hi Guys!

I followed EXACTLY the tutorial, but no button. Just the link.

Please help me. What's wrong?

Tnx for your response,

 

Jasper.

April 23, 2012 19:37
User photo
Kevin
SymfoniP

Open a support ticket ....Provide us a with a location where your page is published would be a help first of all

April 23, 2012 20:13