SM2

Minimal Inline Audio Link Player

This extension automatically turns any audio URL or link into a minimal inline audio player without having to use something like bbcode. It is brought to you by SoundManager2, a popular JavaScript audio library. The advantage to using this versus standard HTML5 audio players is that this will look the same across browsers. Also, if you don't care too much about audio controls it gives you an unobtrusive way to add playable audio right inside a standard sentence (see screenshot). Click once to play, click again to pause. Simplicity is beautiful. This player will play:

  • mp3
  • mp4
  • m4a
  • aac
  • ogg
  • opus
  • wav
  • flac

Screenshot

Known Issue

The player will not appear immediately after you edit a post. But, it will appear any other time.

Install

composer require zerosonesfun/flarum-ext-sm2

Update

1) composer update zerosonesfun/flarum-ext-sm2

2) Deactivate and reactivate the extension in your admin. This refreshes important asset files.

3) Go to your dashboard, click tools, click clear cache.

4) Clear your browser cache, and any other caches like Cloudflare, if applicable.

Remove

composer remove zerosonesfun/flarum-ext-sm2
Then also delete the folder this extension adds to your public assets extensions folder.

Usage

Simply paste your audio URL into a post. Or, create a link to an audio URL using BBcode or Markdown. For example (markdown):

[Song Name](https://website.com/song.mp3)

Now go forth and spread music across your Flarums.

Links

GitHub: https://github.com/zerosonesfun/flarum-ext-sm2
Packagist: https://packagist.org/packages/zerosonesfun/flarum-ext-sm2

    7 days later

    SM2 v0.1.3-beta.8 (Starr) Released

    What's new?

    • Fixed issue where player wasn't always loading.
    7 days later

    Updated composer file so that this can be installed on any future beta 8 minor release.

    Can someone make a test preview? I'm curious to see how it looks here 🙂

      neogeo There’s a screenshot in the first post. Is that what you mean?

          010101 I see... but what we can do with this madafakah ugly url? 😃

          Would be perfect if you could implement this with the simple, nice and standard... html5 Audio Tag

              neogeo I just changed up the styling a bit so that it will look more like an audio player. If you use markdown or bbcode and create an actual link, you won't have just an ugly URL. Please see the new screenshot in my first post.

              SM2 v0.1.4-beta.8 (Cobain) Released

              What's new?

              • Updated CSS and added play / pause buttons

              Remember, it looks best if you create an actual text link to the audio URL instead of just pasting the URL only. But, either way, you get a playable link.
              🎶

                7 months later

                New version released because I forgot to turn console logging off in previous versions. So, a ton of garbage was being printed to your console log on every post load. Now, console logging is off. Much cleaner. 😀

                15 days later

                Error booting Flarum: Return value of Flarum\Extension\Extension::getExtenderFile() must be of the type string or null, none returned

                  GuguguBear

                  I am too stupid to use:

                  Composer update zerosonesfun/flarum-ext-sm2

                  The problem has been solved, thank you for your efforts.

                  • from Google Translate
                    a month later

                    Hello everyone!
                    Can someone confirm compatibility with beta 9 ?
                    I am trying to get it working to no avail 🙁

                      capecarlo It should. I’ve got it on my beta 9 forum. Might be a cache issue. Clear Flarum cache, browser cache, and if you use CloudFlare that too. If this is on a production forum and you can share the link I’ll check it out.

                        a month later
                        7 days later

                        Version 1.2 Released! (Jonsi)

                        • Styling (CSS) changes: Made responsive and now it handles really long URLs and links better; each player will now only take up one line since the text will be truncated should it be too long. This keeps things uniform and clean. Also, removed the background color to ensure this will look good with any theme/colors/dark mode.
                        • Changed play/pause buttons.

                        See original post for install/update instructions and new screenshots.

                        010101 Thank you so much for this extension. Ohh please add support for m4a files, which is the default container of export of compressed audio files from GarageBand and most Mac or iOS audio editors and recorders. I can't change the m4a container to mp4 as that will clash with my videoembed. and also become visitors quickly come to know the difference between a video and audio file if they are mp4 and m4a resp.

                        I don't need all the features of the BBBCode extension and plus it is a few more steps to type the bbcode for the audio file. So wish SM2 had a progress bar like the normal hmtl5 audio player so that listeners could quickly go to any part of the audio. I like how the link is at the side without using the bbcode. Could this link be just ne a cleaner word "Audio" linked to the url instead of the whole url itself, without using the second bbcode option I mean? Thanks in advance.

                            nitaaikumar Check out the screenshots in the first post. You'll see an example with the full URL, and then an example of a link. So you can just create a regular link to an audio file and it will play it.

                            m4a will work too.