these open source web modules are freely usable for any purpose.
please let me know when you do.
flash audio playlist player
mostly as title says.
you can create html buttons to switch track or to switch playlist using a tiny javascript code.
optional autostart, customisable color.
demo
playlist 1
playlist 2
installation
download |
get source
(flash source is quite dirty as2. sorry for that, retrieved from an old script)
encode and upload you mp3 files
the flash player display artists and titles by retrieving datas from mp3 files id3 tags. so fill in your audio encoder when you use it.
(
bonkenk seems a good choice to me)
you may also edit these tags with most audio players.
use id3 v.2 to display track title as soon as the track start loading. (id3 v.1 will only display when loading is complete)
create xml playlists
playlists are defined in .xml files (default is
playlist.xml) that you have to create using any text editor software (such as
notepad++) like this :
<?xml version="1.0" encoding="utf-8"?>
<playlist>
<track file="track1.mp3" />
<track file="track2.mp3" />
<track file="track3.mp3" />
</playlist>
replace
tracks.mp3 with correct mp3s urls.
avoid the use of special characters or encode them this way
http://meyerweb.com/eric/tools/dencoder.
upload your playlist file(s).
setup the flash player
upload
audio_player.swf,
AC_RunActiveContent.js and
audioPlayer.js.
paste this code first on your html page (might be in the
<head> part e.g.) :
<script type="text/javascript" src="AC_RunActiveContent.js"></script>
<script type="text/javascript" src="audioPlayer.js"></script>
<script type="text/javascript">
audio_player = new audioPlayer();
with (audio_player) {
playlist = 'playlist.xml';
autostart = false;
color = 'ff8000';
};
</script>
edit options to suit your needs.
playlist specify the path to your xml playlist as defined above.
autostart can be set to true or false.
define the player
color this hexadecimal way :
http://www.colorpicker.com.
then copy-paste these lines where you want to display the player itself :
<script type="text/javascript">
audio_player.display();
</script>
dispose html links
fast and simple way
paste this in your page for each playlist to display correct links automatically using files names :
<script type="text/javascript">
audio_player.showPlaylist('playlist.xml');
</script>
replace
playlist.xml by the playlist you want to display.
custom way
if you want to use custom links names you'll have to do it manually.
add this kind of links to your html page to use them as track and/or playlist switchers :
<a href="#" onclick="return playTrack('playlist.xml',1);">track 1</a>
<a href="#" onclick="return playTrack(2);">track 2</a>
<a href="#" onclick="return playTrack(3);">track 3</a>
<a href="#" onclick="return playTrack('playlist2.xml');">playlist 2</a>
replace
playlist.xml to whatever xml file your playlist is in (when there's only one playlist you don't need to specify it).
numbers
1,
2 and
3 refer to the track position in the xml file (optional when you want to load a playlist from the beginning).
you also might want to replace
# by your mp3s urls.
this way right clics (save target as...) and browsers with no javascript would be able to download your tracks.
flash video player
here's a minimalist looking flash video player for your website.
features : configurable, resizable, fullscreen mode
using most common video players shortcuts :
single click on the screen or press space to play / pause
double click or press F to go fullscreen
arrow keys to manage time position and sound volume
demo
installation
download |
get source
simplest is to keep all files in the same directory.
you can either use video_player.html or paste this code in your own html page :
<script type="text/javascript" src="AC_RunActiveContent.js"></script>
<script type="text/javascript" src="videoPlayer.js"></script>
<script type="text/javascript">
video_player = new videoPlayer();
with (video_player) {
video = 'goudron.flv';
width = '640px';
height = '480px';
autoplay = false;
autoload = true;
showcontrols = true;
};
video_player.display();
</script>
edit this code (or video_player.html) to configure your player and assign your video file.
video will fit the player size. you can use any css length unit : px, %, ... (you usually should specify the size of the video).
to use multiple players in one page, only copy 2nd code part.
support
post
there it you have any problem using these web modules.