Audio (Mp3 BBcode)

010101

Audio

Abandoned! Use zerosonesfun/flarum-ext-sm2 instead.
Once beta 8 was released I decided to do this extension differently and release it under a new name. This version will not work with beta 8+. The code will remain in GitHub should anyone want it.

(Images show extension with Sound Manager 2 included. Your audio player may look different.)

Description 💤

Originally created by Andrey Sobkanyuk, the Flarum Audio extension adds the ability to use an [audio] BBCode tag. This tag will allow you to play mp3, ogg, or wav URLs with your browser's default HTML audio player. Optionally, you may also add a couple scripts in your Custom Header, and add some CSS to your Custom CSS (both located in your admin appearance settings), and then you will be able to use an additional BBCode which I have added called [sound]. The difference is, the [sound] tag will use the popular Sound Manager 2 JavaScript library. There are multiple benefits to using Sound Manager 2, but you will need to research that on your own.

I will first show the standard installation instructions which do not require you to do anything extra, but you will only be able to use the [audio] tag. If you want to use the [sound] tag, see the Sound Manager 2 add-on instructions.

Installation ⚡

composer require zerosonesfun/flarum-ext-audio:*

Update 🌟

composer update zerosonesfun/flarum-ext-audio

Usage 🦄

[audio]https://example.com/boom.mp3[/audio]

Sound Manager 2 add-on

In addition to installing the main package with composer, go here and download soundmanager2.min.js and inlineplayer.js. Upload those where ever you'd like. Then include the following script tags in your Flarum header. There is a custom header code area in your admin dashboard in the appearance section. You may add this in there.

However, the most proper way would be to add these scripts to the actual <head> of your forum. One way to easily do this is to install this favicon extension. Why a favicon extension? Because this extension essentially just adds code to your <head>. You could follow this other extension's instructions and keep the app icon and favicon code. I recommend this if you don't already have app icon code in your <head>. But, whether you use this extra extension for icon purposes or not, go into the favicon extension's folder, and find assets/html/links.html. In that file you could add the below script tags. Now, the scripts will be properly in the <head> of your site.

If all of that feels like too much to go through, again, just pop the script code below into your custom header box which means the scripts will be included in your <body> instead of the <head>, but it should still work.

<script src="https://yoursite.com/path/to/soundmanager2.min.js"></script>
<script src="https://yoursite.com/path/to/inlineplayer.js"></script>

Finally, add the inlineplayer.css (also located in my github repository linked above) to your custom CSS box in your admin appearance settings. Or, include it however you'd like (such as using the favicon extension mentioned above).

Clear your cache.

Now you can use both the [audio] tag and the [sound] tag if you'd like. Or, just use one of them. The power is yours! If you use the [sound] tag you will include the audio URL a little differently, like this:

SM2 Usage 🦄

[sound="https://example.com/boom.mp3"]Title Goes Here[/sound]

Oh the places you'll go 🖇

Latest Release: https://github.com/zerosonesfun/flarum-ext-audio/releases/tag/1.2.2
Original author: https://github.com/chapay/flarum-ext-audio

datitisev

010101 What’s was the problem with not using the source tag? I think the purposes of the source tag is to have multiple, just n case the browser doesn’t support file type A then it can play type B.
Right now the extension most likely only works with mpeg encoded audio files.
Sorry if I'm wrong.

010101

datitisev

Thanks! I originally changed the tag because something wasn't working for me. But, it was just a caching issue. So, I put the audio tag back to the way the original author had it. Now, it should work with mp3 or ogg files. I recommend going with mp3 always though. More browsers support mp3.

New version is 1.0.1

Up next? Figuring out how to make it so that it works when someone wants to link to both the mp3 and ogg version of an audio URL. Something like this:
[audio]song.mp3|song.ogg[/audio]
Should do this:

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

This way the browser gets to choose the file type it prefers to play.

datitisev

010101 I think the best syntax would be the following:

[audio]hello.mp3[/audio]
[audio]hello.wav[/audio]
[audio]hello.ogg[/audio]

or

[audio mp3=hello.mp3 wav=hello.wav ogg=hello.ogg other=hello.asdfaf][/audio]

I'm not sure if this is possible. The arguments should be mp3, wav, etc... so the browser identifies the type without having to make a request so it can serve what it supports faster.

010101

datitisev I forgot about the good old WAV file.

010101

datitisev Well, I accomplished my original goal which was to get a mp3 link to convert into an audio player. It also will of course work with a ogg or wav URL too.

However, after many hours of trying, I can't get multiple audio URLs in one bbcode to work. I get a 500 error which says something about $event. I followed what was discussed here: https://discuss.flarum.org/d/5237-custom-bbcode but, it just doesn't seem to like a mp3, ogg, and wav in one bbcode. I tried all kinds of different ways.

At one point it might have been close to working. I did the bbcode like: [audio mp3="{URL;useContent}" ogg="{URL2;useContent}" ... And so on. I at least didn't get a 500 error with it like that. But, I couldn't 100% verify if it was fully working. If I tried to just use an ogg file instead of a mp3, the player would show up, but it was greyed out and in the source code it would say unknown format, or something like that.

Long story short, rather than releasing a version which may or may not fully work, I'm sticking with the current single audio URL version since I know it fully works.

On top of all of that, I got to thinking, your typical forum user isn't going to sit there and find or create all three versions of an audio file. It needs to be relatively quick. Most people are just going to paste in a single mp3 URL, or, a wav URL, and move on.

010101

I wonder if this will work. I'll have to try it later.

Stealing the idea from:

JoshyPHP $event->configurator->BBCodes->addCustom(
'[fraction sup={NUMBER1} sub={NUMBER2}]{NUMBER1}/{NUMBER2}[/fraction]',
'<sup>{NUMBER1}</sup>&frasl;<sub>{NUMBER2}</sub>'
);

Change that to:

$event->configurator->BBCodes-addCustom(
'[audio]{MP3URL}/{OGGURL}/{WAVURL}[/audio]',
'<audio><source src="{OGGURL}" type="audio/ogg">
  <source src="{MP3URL}" type="audio/mpeg"> <source src="{WAVURL}" type="audio/wav">
  Your browser does not support the audio tag.
</audio>'
 );

Or, instead of slashes do mp3= ogg= and so on. Hmmm. ?

010101

I'm going to add Soundmanager2 support which is what I originally wanted to do anyway. This will allow more audio formats to be used. It will be optional to use. One could just stick with the original HTML audio player.

010101

Support for Soundmanager2 has been added along with an additional [sound] tag for the Soundmanager2 version. See first post for instructions.

010101

Quick tip! If you want to use this extension with Sound Manager 2 (or if you just need an extension to inject code into your forum's <head></head>, I recommend also installing this favicon extension. It's great to ensure you have basic app icons, but also, you can use it to add scripts and external CSS to your <head>.

See my updated first post in this thread for more information around how this other extension could help you more properly add Sound Manager 2.

Will it work once Beta 8 is released? Not sure. Maybe not. But if not, hopefully I can fork it and get it working.