TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

March 29, 2024, 04:38:05 AM

Login with username, password and session length
Members
Stats
  • Total Posts: 195,105
  • Total Topics: 21,213
  • Online today: 142
  • Online ever: 3,540 (September 03, 2022, 01:38:54 AM)
Users Online
  • Users: 0
  • Guests: 172
  • Total: 172

[Block] Multiple Tracks flash mp3 Player with Menu

Started by Lesmond, February 14, 2011, 09:43:12 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Lesmond

Name of Snippet: Multiple Tracks flash mp3 Player with Menu
SMF/TP versions tested:: SMF2/1.0 RC1
Block Type:: html & javascript
Author: Lesmond
Link to Discussion Here
Other Requirements:Download free version here: below.. With permission from www.premiumbeat.com
Description:   

  • Simple detailed installation instructions
  • Customizable colors
  • Fully resizable
  • Fully dynamic XML Playlist
  • Scrollable tracks menu
  • Keyboard shortcuts enabled
  • Spacebar key to play / pause
  • Left / right arrow keys to rewind / fastforward
  • Up / down keys to adjust volume

Once you download the file, and extracted, there are two things you will need.

playlist.xml
OriginalMusicPlayerPlaylist.swf
These 2 files should be placed in the root of your forum.


This is the file that needs to be edited, to show the songs in your music folder,

I added a folder called "sounds" and placed my mp3 in that folder, so the playlist.xml file needs to point to that folder, so the path would read <path>sounds/song.mp3</path> but you could name that whatever you like

<?xml version="1.0" encoding="utf-8"?>

<playlist>
<item>
<title>Test Track 1</title>
<artist>Artist Name</artist>
<path>song.mp3</path>
</item>
<item>
<title>Test Track 2</title>
<artist>Artist Name</artist>
<path>song.mp3</path>
</item>
<item>
<title>Test Track 3</title>
<artist>Artist Name</artist>
<path>song.mp3</path>
</item>
</playlist>


you can add has many items to the list, just by adding this to the end


<item>
<title>Test Track 1</title> //title of song
<artist>Artist Name</artist> //Artist name
<path>song.mp3</path> //path to the mp3
</item>




Now on the Block code.. should be placed in a html & javascript block.
<center><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<div id="player-holder"></div>

<script type="text/javascript">
var options = {};
options.playlistXmlPath = "playlist.xml";
options.backColor = "000000"; // This line sets the background color of the player to black. you can change this to whatever.
        options.firstColor = "FFFFFF";
         "FFFFFF";
         options.defaultVolume = "75"
var params = {};
params.allowScriptAccess = "always";

swfobject.embedSWF("OriginalMusicPlayerPlaylist.swf", "player-holder", "180", "250", "9.0.0",false, options, params, {}); // This section changes the width and hight player-holder", "180", "250" the fist number "180" is the width, the second "250" the hight.
</script>
</center>


This section changes the width and hight "player-holder", "180", "250", the fist number "180" is the width, the second "250" the hight.

You can also change the background color with this section. options.backColor = "000000"; using hex colors.

Demo in right panel



No support will be given here for the player itself, and support is very limited at www.premiumbeat.com for the player

Lesmond

#1
WE have permission to allow downloads for the player here now :)