Page 1 of 1

[audio] and [audio_controls] BBCodes

Posted: Thu May 05, 2022 11:01 am
by Dave Keenan
The [audio] and [audio_controls] BBCodes have existed in this forum for some time, but have not been explained before this.

The first has the form

[audio=url] text [/audio]

It creates a link with the text "text" that plays the entire audio file at "url" when clicked or tapped. You would typically only use this for audio clips of a few seconds duration. The "text" can also be a smiley, an emoji, or an image (enclosed in [img] or [image=width] tags). The audio file format can be .mp3, .wav or .ogg. To play midi files (.mid) use the [midi] BBCode instead.

The second has the form

[audio_controls=url] text [/audio_controls]

It embeds a set of audio controls that allows the playing of the audio file to be started and stopped. In this case the "text" will only be shown as a tooltip when you hover over the controls, or if the browser does not support audio controls. If you want a title for the controls, just include it as ordinary text before or after the BBCode.

You can upload the audio file as an attachment to the post in which it plays. You must then obtain the URL of the attachment, for inclusion in the [audio] or [audio_controls] BBCode. You can do this before submitting the post, by clicking on the Attachments tab below the edit pane, right-clicking on the file-name, and choosing Copy link location or similar. The file-names don't look like links until you hover over them.




[Edit: This form may not work for iPhone users.]

George Secor 29-edo improv

George Secor 29-edo improv

Re: [audio] and [audio_controls] BBCodes

Posted: Thu May 05, 2022 11:17 am
by Dave Keenan
For those waning to implement these BBCodes in other forums, here are the patterns, replacements and help lines:


<audio id="{URL}" src="{URL}"></audio><a href="#!" onclick="document.getElementById('{URL}').play()" class="postlink">{TEXT}</a>

Create a link that plays an audio file: [audio=http://audio.file]text[/audio]


<audio controls src="{URL}" title="{TEXT}">{TEXT}</audio>

Embed controls to play an audio file: [audio_controls=http://audio.file]tooltip[/audio_controls]