XF 2.2 [XenCustomize] Profile Audio Player & Library - Music and Lyrics 2.1.3

Additional requirements :
Browser Detection v2.3.0+ by Xon

Introducing the premier profile music add-on for XenForo 2, bringing your profile to life! 😊

My journey with XenForo is as long-standing as the platform itself. Over time, I've seen many requests for a profile music addon for XenForo 2. Now, with XenCustomize, I've put in my best effort to offer a solution. Hoping the XenForo community values this sincere effort.

Profile-Audio-Player-Sidebar-Position-v102.png



🎵 Express Yourself with Music Elevate your XenForo 2 community profiles by adding your favorite custom music tracks. Share your musical taste with others in a fun and unique way.

🎧 Easy for Everyone You don't need to be a tech expert to use this. Just upload your music, and the Profile Music Player will do the rest.

🔊 Admin Control, Your Way Tailor the experience to your community’s preferences with admin options. Enable or disable the Player with a single click, and choose whether audio tracks autoplay site-wide when profiles load. You’re in control.

🎵 Immersive Audio Player Experience music like never before with our stylish, HTML5, CSS3 and jQuery-based Audio Player. It’s more than just play and pause – enjoy artist names, album details, track duration, progress bars, and even a playlist button for uninterrupted listening pleasure.

🖼️ Visual Brilliance The Profile Audio Player doesn’t just sound great – it looks stunning too. With album artwork integration, your users’ profiles will come alive with vibrant visuals that perfectly complement their musical choices.

🎨 Make it Yours With 23 style properties, you can customize the Player’s appearance and design to match your community’s unique identity. Set the mood and create an immersive experience like no other.

🎉 Seamless Management Integrates well into the Player, Account wrapper and Visitor menu. Users can manage up to 10 audio tracks with individual input fields, including audio uploads or URLs, artist names, song titles, album names, and even the ability to upload custom album art.

🌐 Effortless Translation If your site supports multiple languages, our product is fully phrased, making it easy to translate into different languages and connect with users from around the world.

🌟 Be a Trailblazer Be the first in your community to have this unique Profile Music add-on. Share your love for music with friends and fellow members.

🎶 Feel the Music Experience the joy of music as it fills your profile. Let your favorite tunes speak for you.

Complete features list:​

  • Profile audio player appears on user profiles when they start adding audios to their playlist.
  • Admin option to Enable or Disable "Profile Audio Player" (Enabled by default).
  • Admin option to Enable or disable "Manage Your Playlist" in Account visitor menu.
  • Admin option to Enable or disable "Manage Your Playlist" in Account navigation group. [NEW in v1.0.1]
  • Admin option to Enable or Disable "Autoplay" of audio tracks site-wide when profiles load.
  • Admin option to choose Player position (Profile Sidebar by default).
    • Profile Sidebar (Right sidebar on profile).
    • Profile Sidenav (Left sidenav on profile).
  • Profile Audio Player section above "Settings" section in Account wrapper.
    • Manage your playlist page (forum.com/account/manage-your-playlist).
    • Support up to 10 audio tracks. [NEW in v1.0.1]
    • Introduced the ability for users to directly upload audio files. [NEW in v1.0.2]
      • Accepted audio file extentions are: mp3, wav, aac, flac, m4a, ogg, oga, amb, m4r, and opus.
    • Each audio has five input fields for users:
      • Audio (Upload audio or provide a link)
      • Artist name
      • Audio/song title
      • Album name
      • Album art (upload image)
  • Enable "Manage Your Playlist" page link in account visitor menu.
  • Enable "Manage Your Playlist" page link in account navigation group, next to the Inbox and Alert buttons. [NEW in v1.0.1]
  • Own database table to store User audio data: Audio url, Artist, Audio title, Album and Album art URL.
  • Stylish and customizable Audio Player based on HTML5, CSS3 and jQuery.
  • Audio Player features include:
    • Artist name
    • Album name
    • Album art
    • Audio track title
    • Audio track duration
    • Audio track progress bar
    • Audio tracks playlist button
    • Play button
    • Pause button
    • Next track button
    • Previous track button
    • Manage your playlist button (Permission controlled)
    • Volume control
  • Utilized the XenForo standard title tooltip for all buttons on the player.
  • Audio formats supported (tested) in addition to MP3 include:
    • MP3 (MPEG-1 Audio Layer-3)
    • WAV (Waveform Audio File Format)
    • AAC (Advanced Audio Coding)
    • FLAC (Free Lossless Audio Codec)
    • M4A (MPEG-4 Apple Lossless Audio Codec)
    • OGG (Ogg Vorbis Compressed Audio File)
    • OGA (OGG Vorbis Audio)
    • AMB (Ambisonic B-Format)
    • M4R (iTunes Ringtone File)
    • OPUS (Opus Audio File)
  • Streaming URLs for web radio, such as "Icecast" and "SHOUTcast," can also be compatible.
  • Included 23 style properties that make it easy to customize the Player's look and design effortlessly.
    • Player album art default
    • Player album art width
    • Player background
    • Player controls action button active color
    • Player controls action button color
    • Player controls duration color
    • Player controls progress bar background
    • Player controls toggle play list background color
    • Player controls toggle play list bottom
    • Player controls toggle play list height
    • Player current info color
    • Player play list active color
    • Player play list color
    • Player play list hover color
    • Player volume background
    • Player volume slider
    • Player width
    • Player Current Info Song Album
    • Player Current Info Song Artist
    • Player Current Info Song Title
    • Player Play List Songs Info Song Artist
    • Player Play List Songs Info Song Title
    • Player Play List Songs Info Songs Detail
  • Admin can upload a custom default image of "Player Album Art" by utilizing its dedicated style property.
  • Usergroup permissions added under the section: [XenCustomize] Profile Audio Player.
    • View profile audio player
    • Can add audio
    • Can upload audio [NEW in v1.0.2]
  • Permissions for the usergroups are automatically set up during the installation process.
  • Added "Auto Play" for audio tracks when profiles are opened.
  • Phrased completely to make it easy to translate into other languages.

Install and setup​

Install "[XenCustomize] Profile Audio Player" like any other XenForo add-on

Profile-Audio-Player-Install.png


Profile-Audio-Player-Installed.png


Admin options are pre-set by default – at least for the first flight. ✈️

Profile-Audio-Player-Admin-Options-v101.png


Next, explore Usergroup permissions. These are automatically set up during the installation process.
  • "View profile audio player" permission is granted to profile post viewers.
  • "Can add audio" permission is for those who can post on profiles.
  • "Can upload audio" permission is set for users who can upload attachments on profiles.
Profile-Audio-Player-Usergroup-Permissions-v102.png


Before heading to the front-end, let's remember the numerous style properties for customizing the Player's appearance. 🔧🎨

Profile-Audio-Player-Style-Properties-01.png


Profile-Audio-Player-Style-Properties-02.png


Profile-Audio-Player-Style-Properties-03.png


Profile-Audio-Player-Style-Properties-04.png


Now that you've had a glimpse 👀, let's head to the front-end:
  • Directly visiting your profile might disappoint you, as the Audio Player won't appear without adding audio tracks.
  • But don't worry! 🎶 I've included a "Manage your playlist" link in the account visitor menu. This way, whether you're on any page, you can easily access it.
Profile-Audio-Player-Manage-Your-Playlist-Account-Visitor-Menu.png


In v1.0.1, we've added a "Manage your playlist" button to the account navigation group, positioned alongside the Inbox and Alert buttons. This enhancement ensures better visibility and swift access.

Profile-Audio-Player-Manage-Your-Playlist-Account-Navigation.png


Click "Manage Your playlist" to access the "Manage your playlist" page. 🔗🎵

Add your first track by uploading an .mp3 file or providing a link ( ). On playlist page, manage up to 10 tracks with options for audio uploads or links, artist names, song titles, album names, and even custom album art uploads 🎨.

Save changes and...

Profile-Audio-Player-Manage-Your-Playlist-Account-Visitor-Menu.png


..experience the stunning Profile Audio Player. 🎶

Profile-Audio-Player-Player-02.png


Profile-Audio-Player-Player-04.png


Note: If you disable "Autoplay," the profile load will display the Player as shown below. 👇 The default Album art can also be seen here, this can be changed in the "Player album art default" style property. 🎵🔀

Profile-Audio-Player-Player-01.png


As demonstrated above 👆, clicking the "Manage your playlist" button opens an overlay for swift playlist control. 🎵

Profile-Audio-Player-Player-Manage-Your-Playlist-Overlay.png


Utilize the Toggle playlist button to swiftly access your saved tracks as shown below 👇. In the playlist, you'll find album art thumbs, track titles, artist names, and album names.

Tap any track 🎶 to switch and play instantly.

Profile-Audio-Player-Player-03.png


Profile-Audio-Player-Sidebar-Position.png

Did you love using this add-on?​

  • You can support its development by or .
  • Leaving a review and rating would improve its visibility. Your support means a lot! 🙌

FAQ​

License Agreement​

For the avoidance of doubt, purchasing a license entitles you to the use of [XenCustomize] Profile Audio Player on a single XenForo installation. If you wish to install [XenCustomize] Profile Audio Player on more than one installation then you must buy additional licenses.

📝Upgrade Notes​


  • When upgrading from v1, please ensure that you're upgrading from v1.0.3.
  • Also make sure that you CHECK the "Overwrite existing files for add-on rebuilds / upgrades" option. If uploading file using an FTP or file manager, you have to overwrite all files.
  • If you have made modifications to the templates, be sure to make a backup of those changes, and then revert those templates.
Download V2.1.3 :
 
Back
Top