music player non flash

[Pebbles]

currently i am using 

flash-mp3-player.net/

which is easy, free and looks decent
i changed the settings so it autoplays a song on a member profile 
for example, go my profile
cute.boards.net/user/1

it autoplays BUT ONLY after you click on the transparent layer thats on top of the music player(which is there cause of chrome i think and the flash settings stuff), once clicked on that, the music player gets ''activated'' and it auto plays the song
but thats useless, nobody wants to click something first before autoplay kicks in.....

so far i heard it only auto plays in firefox - no transparent layer on top of the player blocking the auto play
but not in other browsers such as chrome etc .... most people use chrome nowadays right?
so yeah..... this is a bit sucky

question is
does anyone know a music player like this, easy, free and decent looking
that does not use flash and that is easy to implant on proboards?
i been googling and found not anything useful i think

thank you
(i hope i posted this in the right section)

[Quozzo]

I know of a way but it requires you to host, or have access to, the audio files and they must be a certain extension like mp3.

[Pebbles]

Mar 28, 2017 23:06:03 GMT -8 Quozzo said:

I know of a way but it requires you to host, or have access to, the audio files and they must be a certain extension like mp3.

well the one i mentioned above and am using now
also requires that so yeah
is it one that looks decent enough ? please tell me more 

[Quozzo]

Its the HTML 5 audio player. What are the URLs to some of the tracks just so I have something to work with.

[Pebbles]

Mar 30, 2017 11:43:38 GMT -8 Quozzo said:

Its the HTML 5 audio player. What are the URLs to some of the tracks just so I have something to work with.

are you saying there is no website with a generator of the one you are talking about, meaning i can add the stuff myself?

[Quozzo]

Yes. I'll just make a plugin that grabs the URLs from the plugin settings menu for the playlist. It will work in Internet Explorer 9 or above and the other 4 major browsers.

Do you have the URLs to some tracks? You can PM them to me if you don't want them public.

I won't be able to start on this until Saturday 8th April if you can wait that long.

[Pebbles]

Apr 1, 2017 10:42:16 GMT -8 Quozzo said:

Yes. I'll just make a plugin that grabs the URLs from the plugin settings menu for the playlist. It will work in Internet Explorer 9 or above and the other 4 major browsers.

Do you have the URLs to some tracks? You can PM them to me if you don't want them public.

I won't be able to start on this until Saturday 8th April if you can wait that long.

i very much appreciate it you want to help with this
however, it is not about a playlist of several tracks i want to display
this is about indv. music players, everyone can have one on their profile and mini profile with a song of choice
sorry if i did not make that clear yet

the way it is done now is with custom profile fields

[Quozzo]

Apr 3, 2017 1:35:30 GMT -8 Pebbles said:

Apr 1, 2017 10:42:16 GMT -8 Quozzo said:

Yes. I'll just make a plugin that grabs the URLs from the plugin settings menu for the playlist. It will work in Internet Explorer 9 or above and the other 4 major browsers.

Do you have the URLs to some tracks? You can PM them to me if you don't want them public.

I won't be able to start on this until Saturday 8th April if you can wait that long.

i very much appreciate it you want to help with this
however, it is not about a playlist of several tracks i want to display
this is about indv. music players, everyone can have one on their profile and mini profile with a song of choice
sorry if i did not make that clear yet

the way it is done now is with custom profile fields

Sorry for the delay. I can start it next week. If you're wanting users to have their own track from a selection of songs you have then it will need to use a user key for that. Will that be OK?

[Pebbles]

Apr 16, 2017 4:26:05 GMT -8 Quozzo said:

Apr 3, 2017 1:35:30 GMT -8 Pebbles said:

i very much appreciate it you want to help with this
however, it is not about a playlist of several tracks i want to display
this is about indv. music players, everyone can have one on their profile and mini profile with a song of choice
sorry if i did not make that clear yet

the way it is done now is with custom profile fields

Sorry for the delay. I can start it next week. If you're wanting users to have their own track from a selection of songs you have then it will need to use a user key for that. Will that be OK?

not a selection of songs, they can pretty much get any ''kpop'' song they want 
so it is not like i have a big list i put available that they can choose from
also the way it is now, is so only staff can add it to their profile as its a feature that they need to purchase with forum money

so what i basically need is a music player code  that is easy to add in the profile and mini profile
and i'll able to add any mp3 in it whenever and change it whenever for everyone indv

is that doable?  
if not, no worries
ill figure something else out in that case

[Quozzo]

Apr 16, 2017 11:13:15 GMT -8 Pebbles said:

Apr 16, 2017 4:26:05 GMT -8 Quozzo said:

Sorry for the delay. I can start it next week. If you're wanting users to have their own track from a selection of songs you have then it will need to use a user key for that. Will that be OK?

not a selection of songs, they can pretty much get any ''kpop'' song they want 
so it is not like i have a big list i put available that they can choose from
also the way it is now, is so only staff can add it to their profile as its a feature that they need to purchase with forum money

so what i basically need is a music player code  that is easy to add in the profile and mini profile
and i'll able to add any mp3 in it whenever and change it whenever for everyone indv

is that doable?  
if not, no worries
ill figure something else out in that case

If you don't have a list then how do you pick a song for them? How can they pick a song for you to enable?

Right now I'm thinking to just have an empty text field and you simply copy-paste the URL into their profile so that the song will play on their profile. Is that right?

[Chris]

It looks to me that this player is a variation of the template modification described here in which case all you would need to do is wrap that embedded object in an audio tag with the appropriate attributes filled out so browsers that support the html5 audio (and the available encoding) will play that instead and those that do not will fallback to the flash-based version. Here is a literal HTML representation of what I am suggesting for the one I am seeing in the profile you have linked in this thread:

<div class="player">
<audio controls="controls" autoplay="true" style="max-width:100%;">
<source src="http://k003.kiwi6.com/hotlink/vtmydwn751/SHINee_-_Tell_Me_What_To_Do.mp3" type="audio/mpeg" >
<object width="250" height="20" data="https://cldup.com/1gyTt8zrXC.swf" type="application/x-shockwave-flash">
<param value="https://cldup.com/1gyTt8zrXC.swf" name="movie">
<param name="wmode" value="transparent">
<param value="mp3=http://k003.kiwi6.com/hotlink/vtmydwn751/SHINee_-_Tell_Me_What_To_Do.mp3&autoplay=1&loadingcolor=ffffff&buttoncolor=ffffff&slidercolor=ffffff;" name="FlashVars">
</object>
</audio>
</div>

If you need help with template variables regarding this modification then I would obviously need to know what the template looks like currently.


ETA: results as viewed in Chrome:

[Pebbles]

Chris

i had never seen your reply before until now, i'm sorry , though to be fair you did not quote me or tag me so i never got a notification someone else replied to this thread   

does your solution also have the option to add a custom colour to the player? and would it be possible to hide the download button and loudness thing as well?

 thanks for the help

[Chris]

Sept 29, 2017 12:50:57 GMT -8 Pebbles said:

Chris

i had never seen your reply before until now, i'm sorry , though to be fair you did not quote me or tag me so i never got a notification someone else replied to this thread   

does your solution also have the option to add a custom colour to the player? and would it be possible to hide the download button and loudness thing as well?

 thanks for the help

HTML5 players are highly browser-specific so if you were to load the page in Firefox then load in Chrome you would basically see two different players, the Firefox version for example has no download button. Suffice it to say the browser-created players are shadow roots and therefore immune to most CSS influences unless specifically allowed by the browser^[1]. If you remove the controls="controls" part from the markup then that will remove the controls (play/pause/etc.) and in some browser, at least last time I checked, simply hide the whole thing while others will leave a visual representation showing song progress but without controls.

The dominant method for "styling" HTML5 players currently involves extensive javascript event driven proxying where an image is instead used to represent the player while the real player gets hidden and then that image is switched out to reflect states such as playing, volume change, etc. That allows you to pretty much use any image for a player that you like but it is also complex enough to merit a full fledged plugin otherwise you would need to know how to write your own scripts in order to understand how to configure it

[Pebbles]

Sept 29, 2017 20:31:55 GMT -8 Chris said:

Sept 29, 2017 12:50:57 GMT -8 Pebbles said:

Chris

i had never seen your reply before until now, i'm sorry , though to be fair you did not quote me or tag me so i never got a notification someone else replied to this thread   

does your solution also have the option to add a custom colour to the player? and would it be possible to hide the download button and loudness thing as well?

 thanks for the help

HTML5 players are highly browser-specific so if you were to load the page in Firefox then load in Chrome you would basically see two different players, the Firefox version for example has no download button. Suffice it to say the browser-created players are shadow roots and therefore immune to most CSS influences unless specifically allowed by the browser^[1]. If you remove the controls="controls" part from the markup then that will remove the controls (play/pause/etc.) and in some browser, at least last time I checked, simply hide the whole thing while others will leave a visual representation showing song progress but without controls.

The dominant method for "styling" HTML5 players currently involves extensive javascript event driven proxying where an image is instead used to represent the player while the real player gets hidden and then that image is switched out to reflect states such as playing, volume change, etc. That allows you to pretty much use any image for a player that you like but it is also complex enough to merit a full fledged plugin otherwise you would need to know how to write your own scripts in order to understand how to configure it

ok well i know nothing about javascript lol and by the sounds of it , it seems not possible easily to do so and sounds also as a hassle 

could you please tell me what to do exactly , in detail, to make that one appear as you showed me in the screenshot? im still a bit confused .. or is it a simple matter of replacing the code i got in the template now with the one you provided up here?
and that html5 one will auto play no matter what browser , correct? 

thank you