Audio BBcode Add-on

010101

Audio BBCode

A Flarum extension. Adds an [audio] BBCode. Can be used with Friends of Flarum Upload extension. If used with Upload extension, set up audio rules and choose the Audio template.

Usage

[audio mp3=song.mp3 ogg=song.ogg]
[audio mp3=song.mp3]
[audio ogg=song.ogg]
[audio m4a=song.m4a]
[audio wav=song.wav]
[audio flac=song.flac]
[audio webm=song.webm]
[audio mp3=song.mp3 width=50]
[audio mp3=song.mp3 download=download]

(You may put a mp3 and ogg file together for maximum browser compatibility, or just post a mp3, ogg, wav, flac, webm or m4a file alone. Optionally set the width and/or allow downloads. The download attribute only works in certain browsers, most notably Chrome.)

Install

composer require zerosonesfun/flarum-bbcode-audio:"*"

Update

composer update zerosonesfun/flarum-bbcode-audio:"*"
php flarum cache:clear

Uninstall

composer remove zerosonesfun/flarum-bbcode-audio
php flarum cache:clear

nitaaikumar

010101 Thanks so much for this much needed bbcode extension for html5 audio. m4a aac audios have much higher quality than mp3 at the same bitrates and the m4a audio is the default format for Macs and Garageband export etc. It works if I use the audio mp3 code for the m4a files also. But if you could add the [audio m4a="path"] code too for m4a rendering it into the correct type="audio/mp4" code instead of the type="audio/mpeg" for mp3 just like you do type="audio/ogg" for ogg audios, it would give a more correct picture to the browsers for embedded m4a html5 audio please?

010101

nitaaikumar

[audio m4a="song.m4a"] is now supported if you update to the latest version.

010101

nitaaikumar Either version will work, but FYI, I just released another new version of this extension. You may update if you'd like. I decided to do the code in a better, slightly more condensed way.

nitaaikumar

Thanks. Is this new version number 1.3? Oh now the audio player is not showing at 100% width in all devices like before. Please add this back because the audio seek bar is much longer at 100% width so it was easier to go to any time in the audio on mobile devices as well as desktop. Also can you please add some option to use loop html5 audio variable if we want, as some of my listeners want the audio to loop forever in the background once they play it?

tolgaaaltas

nitaaikumar Is this new version number 1.3

You can check it yourself from GitHub or Packagist.

010101

nitaaikumar Yes, 1.3. This extension never included CSS or height/width for the player. You can try adding this to your Flarum’s custom CSS box:

audio {
width: 100%;
}

If that doesn’t work (and remember to clear caches) could you post a screenshot?

Adding the ability for users to turn looping on is a good idea. I’ll do that. Maybe within the next few days. Depends on how busy I get. 🙂

I should also add the ability to change the width via the BBcode. I’m thinking in the next version, you’ll be able to post a BBcode like this:

[audio mp3="song.mp3" loop=true width=100%]

nitaaikumar

010101 You rock! The css did it. Waiting for the loop with thanks!

010101

Version 1.7 Released

What's new since the initial release?

Added the ability to use a m4a, wav, flac, or webm file. Which means you now have the option of using: mp3, ogg, m4a, wav, flac, or webm.
Added the ability to modify the width of the player. Only input a number when using the width attribute; it will become a percentage. Or, if you do not use the width attribute, the player will default to 100% width.

See original post above for install and update instructions.

nitaaikumar - I tried to add the loop option you suggested, however at this time I'm unable to get it working. It's easy to add the loop attribute manually. You just add "loop" to the audio tag. Or, loop="loop" works too. But, the bbcode engine that Flarum core uses is giving me a hard time. If I do it one way, it ignores the loop attribute. If I do it another way, it works, but always; it can't remove the loop attribute. It's difficult to fully explain; it probably has to do with security features the bbcode engine has built in.

Also, if you want you can remove that audio CSS I suggested. Now, the player will be 100% width by default.

nitaaikumar

010101 Trying it now. So for looping it would be [audio m4a="song.m4a" loop="loop"]?

Oh thanks for adding wav too. On that point, could you please add flac support as well because flac is 30% in size to wave files at the same quality and with flac we can embed full 24-bit 96Khz sound at times when we need it, which we can't in m4a which is limited to max 16-bit 48Khz.

nitaaikumar

010101 If I do it one way, it ignores the loop attribute. If I do it another way, it works, but always; it can't remove the loop attribute.

Is possible that loop is set to always on or off by default and you add a setting in the Extensions to do the opposite? If that is not possible, if you could keep it on for default for this extension and off from your other audio extensions, so people can use whichever one they want? I really need it as many have expressly said that they come to the site first thing they get up to play the audio as it relaxes them and would want it to keep on playing in loop in the background because they may not want to download every single new audio. And they can always quickly pause or stop the audio playing in loop on the phone through the top notifications dropdown on android or the bottom control panel on iOS without having to visit the flarum discussion. I think loop may also cache the audio for offline playback in the browser if their internet cuts off. Thanks so much for adding flac too.

010101

nitaaikumar No, I was saying that I could not add looping. I was trying to explain why. But, it's not easy to explain.

I went ahead and added flac and webm. You'll just need to run composer update zerosonesfun/flarum-bbcode-audio

010101

nitaaikumar Sorry, I don’t want to turn it on by default because someone else may want to use this extension and they may not like looping. I’m afraid I don’t have the time, or desire, to add settings at this time. I think I’ve got a little Flarum extension burnout. Time to rest. 😴

I’ll leave you with a manual option if you want... It’s pretty easy... Replace line 19 in this extension’s extend.php file with:

'<p><audio class="bbaudio inline-exclude" style="width:{NUMBER}%;" controls loop>

After this change go to your admin dashboard and clear your Flarum’s cache.

nitaaikumar

010101 Oh you took the right decision. Just found out that iOS 13 does not play the html5 audio from any web page in the background if it has a loop tag to it. Very smart, eh!

samtto

010101 thank you for your good work.
I'd like to ask some questions:

Can music be played automatically?
Video does not support mobile HTML5?

010101

samtto

No. I thought about adding this but, this would mean any forum member could post a music player which auto plays which could be unexpected and annoying. Also, many devices, like the iPhone, block auto playing anyway.
This is solely an audio BBCode; it has nothing to do with video. But, you may use this formatting extension to make video URLs auto embed.

[deleted]

Can we embed mp3 files stored with Google Drive?

010101

[deleted] As long as the file ends in .mp3, .mp4, .wav, or some audio extension.