Easy Audio Embed BBCode

Started by Pegasys, May 26, 2010, 09:55:36 AM

Previous topic - Next topic

Pegasys

There are numerous mods to allow adding video to messages... but I was not able to locate anything specifically for audio.... a small little visible control in the message that would allow play back of a linked wave or MP3 file.  The sort of thing we see on many web sites but something that I, at least, had not seen for SMF forum messages.

Most PC users already have the audio player we need... the Windows Media Player... installed on their system.... and it is supported by all the mainstream browsers.  And there are a myriad of ways to embed a simple control in HTML that use it. So it seemed a simple and logical process of adding such a control as a BBCode tag for use with SMF.

And it was.

Borrowing from an older mod to use the Media Player to embed video in messages, I modified it to play only audio files. The code for it is below... to be added to the BBCode array in the subs.php file.

Find:
array(
'tag' => 'green',
'before' => '<span style="color: green;" class="bbc_color">',
'after' => '</span>',
),


Add Before:
array(
            'tag' => 'audio',
            'type' => 'unparsed_content',
            'content' => '<embed name=mediaPlayer pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" src="$1" width="200" height="45" type="application/x-mplayer2" showcontrols="1" showdisplay="0" autostart="0" uiMode="mini" showstatusbar="1">&nbsp;</embed>',
            'block_level' => true,
            'disabled_content' => '$1'
         ),



To use, simply wrap a link to an external audio file in audio tags.

Example:  [audio]http://somesite.com/somesong.mp3[/audio]


* Please note that this is not a complete mod. I did not add the extra modification required to have the new BBCode appear in the Editor. I do not have time to package up a complete mod and support it... but anyone who wants to should feel free to borrow the idea and run with it.


And Now... The Particulars:

- I set the autostart parameter to false (off)... because I don't think we really want songs and sound effects starting up whenever a new forum  page is loaded. Imagine the cacophony of noise we'd hear when we open a topic that has several messages with embedded sound in them.

I prefer that the reader have the option to play any embedded sound... and the author of the message can use the control to add a "multi-media" effect to enhance their message if they choose to.


- I'm sure there are better, more refined and even more flexible ways to implement this. This approach was intended to use a method that would not require members and readers to install any new specific controls or audio players. Still, I found that Firefox required me to install the Firefox Media Player add-on.    (available here: http://port25.technet.com/pages/windows-media-player-firefox-plugin-download.aspx)

- I tweaked this for use on the Media Player that ships with Windows 7. I also tested in on Vista. It works perfectly in Chrome. Works properly in IE 7 & 8... although it looks a bit different. And it works correctly in Firefox once the Firefox Media Player add-on is installed. When not supported by the browser, it seems to gracefully fall back to a proper display message that an extra add-on is required.

- By default, the control wants to display the full media player screen... with a sound wave display above the controls. I could not get it, as is, to recognize the newer Media Player iuMode parameter that would force it to display the controls only. Nor would the older showdisplay and showcontrols parameters  work.  So I resized the display to show the controls only.  This works... but is a bit of a kludgey work-around that might not be visually ideal for all browsers. I'm sure with additional tinkering, there would be a better way to implement it.




MultiformeIngegno

Interesting! I'm going to try it! :)
RockCiclopedia (wiki - forum), Tutta la storia del rock, scritta da voi ...
Rimanere aggiornati sul mondo della musica grazie al nuovo feed "RockCiclopedia Music News"!

Roph

I'd recommend instead using flash. It's easy to setup JW player to do that.

It's better to stick to flash, and thus force flash compatible formats. By doing it with a WMP control, it depends on what filters the user has on their PC, and of course you're making it difficult for users of other operating systems.

Neverhurry

#3
I tried it and it works perfectly in Firefox, i don't remember if I installed any Media Player add-on. Really nice work!
I am using SMF 2.0.1, curve themes.

Pegasys

Quote from: Silverline on May 28, 2010, 02:37:30 PM
I'd recommend instead using flash. It's easy to setup JW player to do that.

It's better to stick to flash, and thus force flash compatible formats. By doing it with a WMP control, it depends on what filters the user has on their PC, and of course you're making it difficult for users of other operating systems.


I thought of that. But its resource intensive, larger files that have to be streamed (usually) and a control that still has to be installed and updated fairly often.

Users of other operating systems would be... Mac users running Windows. So they got it.


The advantage is that virtually 99.99999% of anyone who visits my site has the WMP on their system. Everything runs client side and, in my case, all the media is off-site as well.   So no drain on my host's server.... which is important when you're running a fairly active site on shared hosting.

Roph

#5
How's it resource intensive to have a little flash player such as JW Player?

It weighs in at around 50kB, if you're worried that you'll have trouble handling serving such a small file, I'd consider changing hosting. I must say I'm surprised to see you run such a forum and still remain on hostgator.

Flash supports the bog standard, 95% of the time used MP3 format. It also supports AAC in all flavours, including HE-AAC v2. You can fit 44.1k Stereo audio with good quality into bitrates as low as 30kbit/s.

Pegasys

Quote from: Silverline on May 31, 2010, 10:24:45 AM
How's it resource intensive to have a little flash player such as JW Player?

It weighs in at around 50kB, if you're worried that you'll have trouble handling serving such a small file, I'd consider changing hosting. I must say I'm surprised to see you run such a forum and still remain on hostgator.

Flash supports the bog standard, 95% of the time used MP3 format. It also supports AAC in all flavours, including HE-AAC v2. You can fit 44.1k Stereo audio with good quality into bitrates as low as 30kbit/s.


The media software used does not go on the host. It all runs client side. So this is one occasion where size does not matter.   ;)

On the server side... there is nothing. And in your web site scripts... just basic HTML pointing to the media player and a remote audio file. Its really no different than linking to an image file on an image hosting site.

Its simply a matter of what do most members & visitors to your site already have installed on their systems by default. Windows users all have Media Player. Mac users, on my site anyway, are all running Windows as well. And Linux users are just to few to worry about. We can't punish the many for the wants of the few. Buts that may be just my site.

But here's the good news.  I posted the code I used here in the first message. It should be quite simple to modify that to use whatever control you would prefer to use. You can then make a full supported mod from that & post it here in the mods section for everyone to use!

The whole idea to just have a simple, audio playback control as a BBCode. There are lots of BBCode  mods for embedding video... but none that I found exclusively for audio.  So have fun and run with it if you want...   :)



A lot of people have flash disabled on their browsers or just don't install it... because so many annoying ads on web pages use it.

Roph

You're wrong with those statistics. But don't take my word alone for it, simply notice that every single major site that deals with content like that uses flash to display it. Granted, HTML5 is slowly making an entrance with <audio> and <video> tags, but its time for ubiquity is not just yet.

I've had [mp3], [audio], even [grooveshark] tags for years now, all flash based. With some tinkering, you can even stream media attachments directly inside the post.

I was just (and still am) baffled as to why you think relying on the presence and functionality of windows media player is a superior option, or that you believe more people have npdsplay than flash player (again, you could not be more wrong). You even mention in your opening post that you had to install additional extras, whereas I'm sure you could at the same time watch youtube videos without any problems.

Pegasys

Quote from: Silverline on May 31, 2010, 11:38:52 PM
You're wrong with those statistics. But don't take my word alone for it, simply notice that every single major site that deals with content like that uses flash to display it. Granted, HTML5 is slowly making an entrance with <audio> and <video> tags, but its time for ubiquity is not just yet.

I've had [mp3], [audio], even [grooveshark] tags for years now, all flash based. With some tinkering, you can even stream media attachments directly inside the post.

I was just (and still am) baffled as to why you think relying on the presence and functionality of windows media player is a superior option, or that you believe more people have npdsplay than flash player (again, you could not be more wrong). You even mention in your opening post that you had to install additional extras, whereas I'm sure you could at the same time watch youtube videos without any problems.


As I said, I have several options installed for viewing video. Not just audio exclusively.   The light-weight Media Player solution worked perfect for me. If its not right for you, then don't use it. Easy Peazy.

Oddly, I could not find ANY audio BBCode mods in the mods database here.... and couldn't find any posted code snippets or tips related to it here either. Yet, you claim that you have had several installed on your site for years.  Ever think about sharing with the group?


You are right in that we do see Flash on many sites we visit. Its what they use to display those incredibly annoying animated advertisements with the jacked up audio. That why I and so many others use Flashblock or one of the other many other Flash disabling tools that have continually risen in demand and common use.  Flash is a powerful tool... but much abused. Its a serious spam and marketing magnet.


Roph

array(
    'tag' => 'audio',
'type' => 'unparsed_content',
    'content' => '<embed src="http://rmrk.net/src/mp3player.swf" width="280" height="19" flashvars="file=$1&type=sound" /><a href="$1"><img src="http://rmrk.net/Themes/rmrk4-lite/images/silk/drive_web.png" alt="Download $1" /></a>',
),


I created multiple aliases, so [mp3] [m4a] [aac] etc all work too.

array(
    'tag' => 'grooveshark',
'type' => 'unparsed_content',
    'content' => '<object width="250" height="40"> <param name="movie" value="http://listen.grooveshark.com/songWidget.swf"></param> <param name="wmode" value="window"></param> <param name="allowScriptAccess" value="always"></param> <param name="flashvars" value="hostname=cowbell.grooveshark.com&widgetID=$1&style=metal&ap=0"></param> <embed src="http://listen.grooveshark.com/songWidget.swf" type="application/x-shockwave-flash" width="250" height="40" flashvars="hostname=cowbell.grooveshark.com&widgetID=$1&style=metal&ap=0" allowScriptAccess="always" wmode="window"></embed></object>',
),


The user chooses to embed a grooveshark song, and simply copies the ID into [grooveshark][/grooveshark] tags, or [gs] for short.

array(
    'tag' => 'video',
'type' => 'unparsed_content',
    'content' => '<embed src="http://rmrk.net/src/mp3player.swf" width="575" height="324" flashvars="file=$1&type=video" allowfullscreen="true" allowscriptaccess="always" />',
),



Same, [video] & [mp4] work.

Example:



What you're trying to do is akin to trying to load "Windows picture & fax viewer" to display images in the user's browser.

Pegasys

So, the player control and image(s) have to be downloaded from your site each time a member or visitor uses or even views the control?

If the source of the control is on your server, is it then also running on your server each time the control is activated?


Roph

QuoteIf the source of the control is on your server, is it then also running on your server each time the control is activated?

Why do you keep calling it a "control"?

It's a flash (.swf) file. The SWF file is downloaded and then ran by their flash player. Nothing "runs" on a server, all the server does is serve them the .swf file and, via the flashvars in the HTML, tells the browser what to do with it.

Your terminology and comments give me the impression that you don't know how flash works. http://en.wikipedia.org/wiki/Adobe_Flash. When you view a youtube video, your browser downloads the "youtube player" .swf file and then, as per parameters given, uses it to play the video file. Nothing is "running" on youtube's servers. First you download the player .swf, and then via that swf you download/play the video file.

QuoteSo, the player control and image(s) have to be downloaded from your site each time a member or visitor uses or even views the control?

The standard JW player swf is 50 kilobytes. Youtube's player swf is 100KB+. If you're worried about being able to handle serving 50KB to display multimedia objects in a sane fashion, then I'm worried for you.

kesulin

#12
autoplay not work, always start music.

To fix this we must add a new instance of audio, because if autoplay attribute is declared always start music.


in subs.php add after
array(
                'tag' => 'audio',
                'type' => 'unparsed_content',
                'parameters' => array(
                       'loop' => array('optional' => false),
                       'autoplay' => array('optional' => false),
                ),
                'content' => '<audio src="$1" autoplay="{autoplay}" loop="{loop}" controls="controls">'.$txt['html5_audio_no_supported'].'</audio>',
                'block_level' => true,
            ),


this code:
array(
                'tag' => 'audio',
                'type' => 'unparsed_content',
                'parameters' => array(
                       'loop' => array('optional' => false),
                ),
                'content' => '<audio src="$1" loop="{loop}" controls="controls">'.$txt['html5_audio_no_supported'].'</audio>',
                'block_level' => true,
            ),


Advertisement: