Audio Players in other sites

[Xesna]

[div][audio controls="controls" src="" style="width:180px;"][/audio][/div]

[audio src="" controls="controls"][/audio]

It can only be played during PREVIEW of the post, whenever you submit or post, the player will be invisible if there is any form of audio source. Is there a way to prevent it from being invisible?

[₪» ⅀ ƪ Ƒ «₪]

I'd also be interested in knowing this!

[Chris]

support.proboards.com/post/7076700

[Xesna]

Sept 24, 2018 12:41:23 GMT -8 Chris said:

support.proboards.com/post/7076700

Thanks. Let me test it out whenever I get the chance, but basically I go to Admin then find the Forum Header and add the segmented code, right?

EDIT: Okay, is there a way to change the outlook of the appearance of the audio based on the image?

[₪» ⅀ ƪ Ƒ «₪]

Xesna does that mean it is working for you, apart from wanting to change the appearance? It didn't seem to make a difference to me, still broken/doesn't play audio, so I'm curious if I'm using the right ubbc code or something

[Xesna]

Sept 25, 2018 12:00:49 GMT -8 ₪» ⅀ ƪ Ƒ «₪ said:

Xesna does that mean it is working for you, apart from wanting to change the appearance? It didn't seem to make a difference to me, still broken/doesn't play audio, so I'm curious if I'm using the right ubbc code or something

The code works from the link he provided and placing it in Admin > Structure > Global Header, then after you save it, you need the code I have above but you need to put in the source link of the song you want to play. I am assuming the audio player projects sound to links that are in mp3, wav or oog/ogg format, just sound audio essentially.

[div][audio style="width:180px;" controls="controls" src=""][/audio][/div]

This is code I have currently (note the div or /div are not required) and below is one with the source link:

[div][audio style="width:180px;" controls="controls"
src="http://66.90.93.122/ost/kingdom-hearts-ii-ost/ydljkxtb/303%20Passion%20-opening%20version
-.mp3"][/audio][/div]
And now, just the code itself (which you may not see unless you quote):

--------------------------------------------------------------------

--------------------------------------------------------------------

^If the audio player is not visible, this was the issue I was having before adding this:


<script>
(function () {
Modernizr.audio && (window.AudioPlayer = {
embed : function (id, opts) {
$('#' + id).replaceWith($('<audio />', {
src : opts.soundFile,
controls : 'controls'
}))
}
})
})()

/*AudioPlayer.embed("audioplayer_689428008", {soundFile: "https://files.catbox.moe/g9tiu1.mp3"});*/


</script>
Chris Phyffer , thanks a bunch by the way.

EDIT: Interestingly enough, the appearance changed based on the image, would like to know how this was done, but I am content thus far given it isn't plain white and largely oval in shape. Thus, whatever the cause it may be, I am grateful.

EDIT 2: Chris Phyffer , I will assume you did your magic on the appearance, thanks.

[₪» ⅀ ƪ Ƒ «₪]

Xesna thank you for clearing that up! It's working now for me as well. :) Out of curiosity, which site do you use to directly host your audio file?

[Xesna]

Sept 26, 2018 8:05:32 GMT -8 ₪» ⅀ ƪ Ƒ «₪ said:

Xesna thank you for clearing that up! It's working now for me as well. Out of curiosity, which site do you use to directly host your audio file?

Personally, I have not decided what free audio hosting and sharing service database to use specifically, however, to list a few:

Google Play Music
Sound Cloud
MEGA
PCloud
Clyp
CatBox

You can use others, but you want to based it on credentials and reputation, the discretion lies with the user.

EDIT: Based on the version of operating systems and browsers (maybe adobe flash player; need to verify), the audio player will appear extremely different. For instance, on Windows 10 Home Premium on a Firefox (latest update), it takes on the appearance on the image in the first post.

On a Windows 7 operating system in a Google Chrome version 69, the audio player will be white in color and oval in shape. In another instance, same operating system, on Firefox version 43, it is a stretched rectangle. On the system is has Adobe Flash Player on version 13, so I need to verify it on other systems to test this, just wanted to make a note on that.

[₪» ⅀ ƪ Ƒ «₪]

Thank you for the recommendations! =D My first thought had been sound cloud too but I was unsure if actually counted as a direct file link, I'll give it a check out ^^

Ahh yeah... that does kinda suck. Idk what your forum is but mine is roleplay and I was picturing incorporating the audio player into my posting tables for some roleplay thread mood music hahah won't be able to really fit the table aesthetic this way. Although having it is way better than nothing and I'll still use it!

Still, tagging Chris (his username is Horace just so you know) in case there is a customization option and also gonna bother Brian since he is a coding guru who will also probably know if there is a way to alter the appearance :)

[Xesna]

Sept 26, 2018 12:34:11 GMT -8 ₪» ⅀ ƪ Ƒ «₪ said:

Thank you for the recommendations! =D My first thought had been sound cloud too but I was unsure if actually counted as a direct file link, I'll give it a check out ^^

Ahh yeah... that does kinda suck. Idk what your forum is but mine is roleplay and I was picturing incorporating the audio player into my posting tables for some roleplay thread mood music hahah won't be able to really fit the table aesthetic this way. Although having it is way better than nothing and I'll still use it!

Still, tagging Chris (his username is Horace just so you know) in case there is a customization option and also gonna bother Brian since he is a coding guru who will also probably know if there is a way to alter the appearance

Not alter per se, but have it stay static in terms of appearance rather than being a non-static on different operating systems, browsers, and audio player versions.

And regarding to his name, I will keep in mind, thanks. Also, no problem, still need to verify the different appearances in other systems as well. I will let you know on a later time.

P.S I do run a roleplaying forum.

EDIT: I tested in a Windows 10 Home on Google Chrome ver 69.0 and it maintains the white oval as an appearance. On my personal laptop, Win10, however, it takes on the appearance of the image above using Firefox ver 64 with the latest Adobe Flash Player. I am curious as a result.

EDIT: On a side note, may I have your link as well where you used the audio player? I would like to check something.

[₪» ⅀ ƪ Ƒ «₪]

The site is in MM but I'll take it out of MM for a moment and just put it back into MM once you're done testing. I'll PM you the URL to keep people from clicking it in the meantime xD

EDIT: Not sure if relevant to this but I have a music player in my mini-profiles, also courtesy of Chris coding years ago, and was able to change its appearance however I wanted. Of course, this was also allowing me to use layout templates and the style sheet, so I'm unsure if it is something that can be done for posts--perhaps through targeted JS in the header? I dunno, that's out of my realm. But the layout template code that generated the music player is

{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Music"}
<div class="player" style="margin-bottom: 0px; margin-top: 5px; margin-left: 11px; position:absolute;top:126px;" title="Click for their chosen song, pick one for yourself with the field Music when editing your profile"><object width="149" height="15" data="https://cldup.com/1gyTt8zrXC.swf" type="application/x-shockwave-flash">
<param value="https://cldup.com/1gyTt8zrXC.swf" name="movie">
<param value="75664e" name="bgcolor">
<param value="mp3=$[user.mini_custom_field.value]&bgcolor=75664e&loadingcolor=ffeedd&buttoncolor=2d2821&slidercolor=2d2821;" name="FlashVars">
</object></div>
{/if}{/foreach}

and in the style sheet it has:

/* music player */
.player {
position:relative;
z-index: 100;
       left:-10px;
}

[Xesna]

Okay from the link you sent me, the audio player on the site through Google Chrome on Windows 7 it is very generic:

vs what you've sent me:

And that is how I see it on my forum as well from the image above, the white oval.