MyBB Community Forums

Full Version: auto embed MP3 urls
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
Can somebody please tell me how to create a new MyCode that will auto embed an MP3 player when a direct link to a mp3 file is posted in a thread?   I really need this! .. THANKS 

ps:  I don't want to have to use any BBcode like brackets, just paste the direct link to the mp3 file like so:
http://yoursite.com/yoursong.mp3
mp3's can be a bit awkward depending on your browser. (Something to do with patents) however those patents are nearly up so it should mean it won't be a problem for much longer.

(You might want to try using a different format for embedding like .ogg etc)
(2016-09-15, 06:39 AM)stryderunknown Wrote: [ -> ]mp3's can be a bit awkward depending on your browser.  (Something to do with patents) however those patents are nearly up so it should mean it won't be a problem for much longer.  

(You might want to try using a different format for embedding like .ogg etc)

That has nothing to do with this MyCode not working.  Rolleyes
(2016-09-15, 02:21 PM)alley Wrote: [ -> ]
(2016-09-15, 06:39 AM)stryderunknown Wrote: [ -> ]mp3's can be a bit awkward depending on your browser.  (Something to do with patents) however those patents are nearly up so it should mean it won't be a problem for much longer.  

(You might want to try using a different format for embedding like .ogg etc)

That has nothing to do with this MyCode not working.  Rolleyes

True, but if you embed and the browser doesn't accept mp3 then it won't show anyway (Firefox for example) and what you are attempting to do is a bit beyond just MYcode.

What you are looking for is likely a Javascript implimentation which attempts to look for the plain URL (ending in mp3) to change how its handled.  

You could likely use JQuery to accomplish this.

Some projects that attempt to do what you ask (albeit not necessarily as straight forwards as just a URL, they might still need a CLASS attached to identify what it is they are handling)
http://jquery.malsup.com/media/
http://jplayer.org
I use the mod Automedia.. it just requires adding any link and plays. I much prefer jplayer but I cannot get it to work on mybb. 1.86 you can take a look if you wish here:

https://www.ebook-mecca.com/Thread-Love-...e-Chickens

it is not a pretty player at all and I really do not like it but it is practically the only thing that works ,, I guess mybb does not find a use for players like jplayer, but many users do..
(2016-09-15, 11:49 PM)Starnova Wrote: [ -> ]I use the mod Automedia.. it just requires adding any link and plays. I much prefer jplayer but I cannot get it to work on mybb. 1.86  you can take a look if you wish here:

https://www.ebook-mecca.com/Thread-Love-...e-Chickens

it is not a pretty player at all and I really do not like it but it is practically the only thing that works ,,  I guess mybb does not find a use for players like jplayer, but many users do..

THanks, but what in the hell does "love among the chickens" have to do with myBB?  Dodgy
I really wish you hadn't asked this question, as I just had to go do some further research to see what was possible. (I know that JQuery etc could probably do it but I decided to have a look at doing it myself)

It turns out that .mp3 is handled by firefox, it's just it won't work in audio tags, instead you have to use video ones.

It should be noted:

This will parse any urls with mp3 written in them, that could mean the subdomain, domain, tld, folder, filename or query string. This can be recoded to be strict in where mp3 applies (although I'm guessing a head request would be required for the file to identify that it's not a folder and perhaps check compatible mime types).

It uses an eventhandler, this allows it to be placed anywhere and waits until the page has finished loading before triggering.
<script>
window.addEventListener('load', function () {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
if (links[i].href.search("mp3") !== -1) {
links[i].outerHTML ='<video id="mediamp3" controls=""><source src="'+links[i]+'" type="audio/mpeg"></video>';
}
}
});
</script>

You can then use CSS to resize the video block;
.mediamp3{
display:inline-block;
height:28px;
width:200px;
}

Edit: This has been updated to reflect the working code.
What template exactly do I place the code in? ... it looks like there are hundreds of them for each theme in the admin cp.
If you want it available to all pages just put it at the bottom of your Footer template. (after the last closing </div>), be warned if you have any a href's with "mp3" in they will be effected.

If you just want it just on the pages that show posts don't put it in the footer, instead use the Showthread template, just place it before the closing </body>.
Does not work
Pages: 1 2