PDA

View Full Version : Profile Enhancements - Golzarion music player in user profile - HTML 5


Golzarion
09-19-2013, 10:00 PM
Golzarion music player in user profile - html5 :

What does this mod do ?

This mod allows users to upload their desire mp3 music and play it in their own profile !

Each user can have only one mp3 music file on server and in order to change his /her mp3 file : he/she needs to upload a file and it would be replaced with the old mp3 file ...
NO silver light or No Flash player installation is needed! It just uses the power of HTML 5 on users' browser.

Install :

1.download the attached file and extract it on your pc

2. upload "mp3"folder and "mp3.php" file in your forum root directory . and be sure that "mp3" folder has the sufficient permission to upload files ( in most hosts 0777 permission ).

3. Admin Control Panel :
Style Manager=>Your Template=>MemberInfo Templates=>memberinfo_block_ministats

Find :

<div class="mini_stats blockbody userprof_content userprof_content_border">Before that , add :
<!-- Golzarion profile Music player Start -->
<div class="underblock"></div>
<div class="block mainblock">
<div id="userinfoblock" class="floatcontainer">
<div class="blocksubhead" colspan="5">Golzarion mp3 Player</div>
<div class="blockbody userprof_content userprof_content_border">
<div class="blockrow member_blockrow">
<audio preload="none" controls="controls" id="mp3player" style="width: 200px;display: block" >
<!--<source src="myVideo.ogg" type="audio/ogg"> -->
<source src="mp3/{vb:raw userinfo.userid}.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
</div>
</div>
<div class="underblock"></div><br/>

<!-- Golzarion profile Music player End -->
-
4. Add the product " product-Golzarion-mp3-player.xml " via Admincp => pruduct manager =>add new pruduct

5.(optional ) if your vb version is 4.2.X ==> Admin Control Panel => Navigation Manager then in "Forum" tab use the right Drop down menu and select " Add Link" then fill it like bellow :
146458 (screenshot4 )
and Save the changes.

Notice : Your users should use "Google Chrome " web browser or Firefox 21 (running on Windows 7, Windows 8, Windows Vista, and Android ) or explorer 8 or higher ...

( No doubt that the latest version of web browser is better ! )

The Persian language(Farsi) translation is also attached .

Optional changes :
1.If you want to increase the size of the mp3 file : in " mp3.php" file search for "2097152" and replace it with your desire size ( the default is 2 mb).Your server also should allow your php to upload that amount of size of mp3 file ... you can change the " php.ini" file on your server or use ".htaccess" file.

2.You can edit the mp3 upload page by editing :"Golzarion_mp3" template it is under "forum Home" template in your style . (It is highly recommended not to change these codes unless you are completely sure of what you are going to do ... )

3.With small amount of changes this html 5 player has the potential to play video files,too. But I do not have enough time right now to do it ...

The player in Chrome :
146459
The player in Firefox :
146460
The upload page :
146461

*** Please click Installed if you use this mode . ***
Golzarion:
http://forum.golzarion.com

Golzarion
09-20-2013, 06:18 PM
Optional :

If you want the users to add " the name of the music file " (like the screen shot bellow) :

146473

First step (#1) :

Go to : Admincp / User Profile Fields / Add New User Profile Field

Then Select : Profile Field Type : Single-Line Text Box

then fill it like the next screen shot :

146472

Next:

At last , (instead of the original code on first post, use the code bellow ) :

3. Admin Control Panel :
Style Manager=>Your Template=>MemberInfo Templates=>memberinfo_block_ministats
Find :
<div class="mini_stats blockbody userprof_content userprof_content_border">Before that , add :
<!-- Golzarion profile Music player Start -->

<div class="underblock"></div>
<div class="block mainblock">
<div id="userinfoblock" class="floatcontainer">
<div class="blocksubhead" colspan="5">Golzarion mp3 Player</div>
<div class="blockbody userprof_content userprof_content_border">
<div class="blockrow member_blockrow">
<audio preload="none" controls="controls" id="mp3player" style="width: 200px;display: block" >
<!--<source src="myVideo.ogg" type="audio/ogg"> -->
<source src="mp3/{vb:raw userinfo.userid}.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</div>
<vb:if condition="$userinfo['fieldX']">
<b> Music Name :</b> {vb:raw userinfo.fieldX}
</vb:if>
</div>
</div>
</div>
<div class="underblock"></div><br/>

<!-- Golzarion profile Music player End -->Replace both bold red X with field number you have created in first step (#1).
and save the changes.

Note : Users can add the name of the music file in their User CP (settings) => Edit profile

w w w.yoursite.com/profile.php?do=editprofile
/

Animparadise
09-23-2013, 06:44 PM
Installed.

Shahed
09-24-2013, 02:02 PM
Installed :)
Nice !

Golzarion
10-01-2013, 11:05 AM
Installed :)
Nice !
You are welcome.:)

OUTL4W
10-14-2013, 01:05 AM
installed...where does this mod place the upload link?

OUTL4W
10-19-2013, 02:18 PM
finally figured out the download link....read instructions....but no matter what I do...keep getting the eror
"Error! Check folder permission!"
even though I chmod'd the mp3 folder to 777....
used firefox 24.0 & chrome 30.0.1599.69 m

ugghhhhh....

Golzarion
10-25-2013, 07:29 PM
installed...where does this mod place the upload link?
It is on your forum's root and the folder name is : "mp3";

finally figured out the download link....read instructions....but no matter what I do...keep getting the eror
"Error! Check folder permission!"
even though I chmod'd the mp3 folder to 777....
used firefox 24.0 & chrome 30.0.1599.69 m
ugghhhhh....
It may be because of your server configuration ... double check the folder "mp3" permission (you should have sufficient permission to upload file via php on this folder ) and also check server " temp " folder name on your php.ini ...
If you do not access "php.ini" on your server ,please ask your hosting company about the temp folder for uploading via php and then on "mp3.php" find :

move_uploaded_file($_FILES["SelectedFile1"]["tmp_name"],"mp3/".$fname) or die("<b>Error! Check folder permission!</b>");and change "tmp_name" to the correct name of temp folder depending on your server configuration .

I hope it helps ...
/
I have installed this mod on two forums personally whith default setting and no chages was required !
It works perfect .

ForceHSS
10-25-2013, 10:53 PM
Once you upload music yes it plays ok but if I upload another mp3 song it still plays the first one uploaded and won't change it no matter what is done

Golzarion
10-26-2013, 05:31 PM
Once you upload music yes it plays ok but if I upload another mp3 song it still plays the first one uploaded and won't change it no matter what is done
It is because of your web browser cache !
Of course you will here the newest music if you clear your browser cache or I guess the next time you visit the profile ...
Any way , if I change the mod to reload the music for every refresh , then there would be 2 possible solutions :

1. Putting no-cache meta tag on user profile .

2. Creating a new table on database in order to store the file name and one query would be added on each page refresh for user profile ...
I have not decided yet, but I'll try to do some changes in future ..

OUTL4W
10-28-2013, 03:23 AM
It is on your forum's root and the folder name is : "mp3";


It may be because of your server configuration ... double check the folder "mp3" permission (you should have sufficient permission to upload file via php on this folder ) and also check server " temp " folder name on your php.ini ...
If you do not access "php.ini" on your server ,please ask your hosting company about the temp folder for uploading via php and then on "mp3.php" find :

move_uploaded_file($_FILES["SelectedFile1"]["tmp_name"],"mp3/".$fname) or die("<b>Error! Check folder permission!</b>");and change "tmp_name" to the correct name of temp folder depending on your server configuration .

I hope it helps ...
/
I have installed this mod on two forums personally whith default setting and no chages was required !
It works perfect .

my php.ini is located in:
/usr/php4/lib/
snippet from php.ini
;;;;;;;;;;;;;;;;
; File Uploads ;
;;;;;;;;;;;;;;;;

; Whether to allow HTTP file uploads.
file_uploads = On

; Temporary directory for HTTP uploaded files (will use system default if not
; specified).
;upload_tmp_dir =

; Maximum allowed size for uploaded files.
upload_max_filesize = 6M


my forum is not located under root....was changed long ago for security reasons....can I point the red text to any folder of my choosing where the forums are located?

Golzarion
10-31-2013, 03:42 PM
my forum is not located under root....was changed long ago for security reasons....can I point the red text to any folder of my choosing where the forums are located?
I guess this is the point! Please check that the folder "mp3" exists on your forum main directory , I mean the place where your forum files and folders are existed.
and check the folder permission again.
for example if your forum path is something like :

www.yourdomain.com/forums/forum.php

Then your "mp3" folder should be on :

www.yourdoain.com/forums/mp3

I hope it would be helpful :)

mohammadxxx
01-15-2014, 02:17 AM
Hi
I did all the things you said in the first post to the last.
But still not playing music!
Why ?

(Description : I transferred your code into postbit_legacy)

hazem_aliraqi
06-27-2015, 12:07 PM
when i upload another mp3 it not play

its play the old mp3 (not refresh to new mp3 )

Golzarion
06-28-2015, 09:55 AM
when i upload another mp3 it not play

its play the old mp3 (not refresh to new mp3 )
I have explained in this post : https://vborg.vbsupport.ru/showpost.php?p=2456453&postcount=10

It is because of your web browser cache !

hazem_aliraqi
07-03-2015, 01:40 PM
ok

i want the conditional to show or hide it for member not upload mp3

like this

<vb:if condition="$show['mp3']">
code here
</vb:if>

abouobaide
05-14-2016, 08:41 AM
can you upgrade your MOD to working with attachmennt ,"to play mp3 attachement"