Profile Enhancements - Golzarion music player in user profile - HTML 5

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 :
screenshot4.jpg (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 :
screenshot3.jpg
The player in Firefox :
screenshot2.jpg
The upload page :
screenshot1.jpg

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

[Golzarion]

Optional :

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

Attachment 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 :

Attachment 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]

Installed.

[Shahed]

Installed
Nice !

[Golzarion]

Originally Posted by Shahed

Installed
Nice !

You are welcome.

[OUTL4W]

installed...where does this mod place the upload link?

[OUTL4W]

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]

Originally Posted by OUTL4W

installed...where does this mod place the upload link?

It is on your forum's root and the folder name is : "mp3";

Originally Posted by OUTL4W

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]

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]

Originally Posted by ForceHSS

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 ..