PDA

View Full Version : HTML5 player soundmanager, dynamic frame resize...



alenmilky
03-10-2015, 12:29 PM
Site (Alen's Italo Disco Universe [Italo Disco Net] (http://www.italo-disco.net/index2.html)) consists of 3 frames (I know that you hate it, but they are OK for me) - left, right and one at the bottom. So I have 6 questions:

1. In the bottom frame I placed HTML5 player. I have a problem with it. Locally it loads and works fine, but it doesn't load when I put it on the server!? And do I really need to have mirrored list here since it consists of links to 3000 songs. This makes page too heavy to load.
Player is based on soundmanager (SoundManager 2: JavaScript Sound For The Web (http://www.schillmania.com/projects/soundmanager2/)). An here it is working properly at the bottom of the page: SoundManager 2: Bar UI Player (prototype) (http://www.schillmania.com/projects/soundmanager2/demo/bar-ui/)

And here is a code of my page with player inside:

******************
<html>
<head>
<title>Player</title>
<script type="text/javascript" src="http://www.schillmania.com/projects/soundmanager2/script/soundmanager2.js"></script>
<script src="http://www.schillmania.com/projects/soundmanager2/demo/bar-ui/script/bar-ui.js"></script>
<link rel="stylesheet" href="http://www.schillmania.com/projects/soundmanager2/demo/bar-ui/css/bar-ui.css" />
</head>

<body>
<div class="sm2-bar-ui full-width fixed">
<div class="bd sm2-main-controls">
<div class="sm2-inline-texture"></div>
<div class="sm2-inline-gradient"></div>
<div class="sm2-inline-element sm2-button-element">
<div class="sm2-button-bd">
<a href="#play" class="sm2-inline-button play-pause">Play / pause</a>
</div>
</div>
<div class="sm2-inline-element sm2-inline-status">
<div class="sm2-playlist">
<div class="sm2-playlist-target">
<ul class="sm2-playlist-bd">
<li><a href="http://www.italo-disco.net/MP3 Player/80/Mariko - Yiasou [Alen's Italo Disco Universe [Italo Disco Net] (http://www.italo-disco.net) sample].mp3"><b>Italo Disco playlist</b></a></li>
</ul>
<noscript><p>JavaScript is required.</p></noscript>
</div>
</div>
<div class="sm2-progress">
<div class="sm2-row">
<div class="sm2-inline-time">0:00</div>
<div class="sm2-progress-bd">
<div class="sm2-progress-track">
<div class="sm2-progress-bar"></div>
<div class="sm2-progress-ball"><div class="icon-overlay"></div></div>
</div>
</div>
<div class="sm2-inline-duration">0:00</div>
</div>
</div>
</div>
<div class="sm2-inline-element sm2-button-element sm2-volume">
<div class="sm2-button-bd">
<span class="sm2-inline-button sm2-volume-control volume-shade"></span>
<a href="#volume" class="sm2-inline-button sm2-volume-control">volume</a>
</div>
</div>
<div class="sm2-inline-element sm2-button-element">
<div class="sm2-button-bd">
<a href="#prev" title="Previous" class="sm2-inline-button previous">&lt; previous</a>
</div>
</div>
<div class="sm2-inline-element sm2-button-element">
<div class="sm2-button-bd">
<a href="#next" title="Next" class="sm2-inline-button next">&gt; next</a>
</div>
</div>
<!-- unimplemented -->
<!--
<div class="sm2-inline-element sm2-button-element disabled">
<div class="sm2-button-bd">
<a href="#repeat" title="Repeat playlist" class="sm2-inline-button repeat">&infin; repeat</a>
</div>
</div>
-->
<div class="sm2-inline-element sm2-button-element sm2-menu">
<div class="sm2-button-bd">
<a href="#menu" class="sm2-inline-button menu">menu</a>
</div>
</div>
</div>
<div class="bd sm2-playlist-drawer sm2-element">
<div class="sm2-inline-texture">
<div class="sm2-box-shadow"></div>
</div>
<!-- playlist content is mirrored here -->
<div class="sm2-playlist-wrapper">
<ul class="sm2-playlist-bd">
<li><a href="http://www.italo-disco.net/MP3 Player/80/Mike Mareen - Don't Talk To The Snake (Instrumental) [Alen's Italo Disco Universe [Italo Disco Net] (http://www.italo-disco.net) sample].mp3"><b>Click last icon on the right with bars to open playlist >>></b></a></li>
<li><a href="http://www.italo-disco.net/MP3 Player/80/1,2,3 - Runaway [Alen's Italo Disco Universe [Italo Disco Net] (http://www.italo-disco.net) sample].mp3"><b>1,2,3 - Runaway</b></a></li>
<li><a href="http://www.italo-disco.net/MP3 Player/80/1000 Ohm - You're The One [Alen's Italo Disco Universe [Italo Disco Net] (http://www.italo-disco.net) sample].mp3"><b>1000 Ohm - You're The One</b></a></li>
<li><a href="http://www.italo-disco.net/MP3 Player/80/2 Belgen - Lena [85] [Alen's Italo Disco Universe [Italo Disco Net] (http://www.italo-disco.net) sample].mp3"><b>2 Belgen - Lena [85]</b></a></li>
<li><a href="http://www.italo-disco.net/MP3 Player/80/50 & 50 Brothers - Red Man [Alen's Italo Disco Universe [Italo Disco Net] (http://www.italo-disco.net) sample].mp3"><b>50 & 50 Brothers - Red Man</b></a></li>
<li><a href="http://www.italo-disco.net/MP3 Player/80/93rd Superbowl - Forever And A Day [Alen's Italo Disco Universe [Italo Disco Net] (http://www.italo-disco.net) sample].mp3"><b>93rd Superbowl - Forever And A Day</b></a></li>
<li><a href="http://www.italo-disco.net/MP3 Player/80/A.R.M. - Number One [Alen's Italo Disco Universe [Italo Disco Net] (http://www.italo-disco.net) sample].mp3"><b>A.R.M. - Number One</b></a></li>
<li><a href="http://www.italo-disco.net/MP3 Player/80/Ago - Computer (In My Mind) (Single) [Alen's Italo Disco Universe [Italo Disco Net] (http://www.italo-disco.net) sample].mp3"><b>Ago - Computer (In My Mind) (Single)</b></a></li>
<li><a href="http://www.italo-disco.net/MP3 Player/80/Ago - Computer (In My Mind) [Alen's Italo Disco Universe [Italo Disco Net] (http://www.italo-disco.net) sample].mp3"><b>Ago - Computer (In My Mind)</b></a></li>
<li><a href="http://www.italo-disco.net/MP3 Player/80/Copy of Ago - Computer (In My Mind) [Alen's Italo Disco Universe [Italo Disco Net] (http://www.italo-disco.net) sample].mp3"><b>Ago - Computer (In My Mind)</b></a></li>
<li><a href="http://www.italo-disco.net/MP3 Player/80/Aida - Number One [Alen's Italo Disco Universe [Italo Disco Net] (http://www.italo-disco.net) sample].mp3"><b>Aida - Number One</b></a></li>
<li><a href="http://www.italo-disco.net/MP3 Player/80/Yvonne Kay - Rise Up (For My Love) [Alen's Italo Disco Universe [Italo Disco Net] (http://www.italo-disco.net) sample].mp3"><b>Yvonne Kay - Rise Up (For My Love)</b></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
******************

2. Frame resize. My bottom frame has certain height. That is file, but when I click open playlist on the player, it loads above the player and it is not visible since frame is smaller than player+playlist. Is there a way to force bottom frame to dynamically resize (become bigger) when I click open playlist on player inside of it? Or is there some other solution?


3. Playlist shows only 5 songs at once, I'd like to show 10 or 15 if it is possible.

4. In right frame I have one page with many links to mp3 songs. So what do I do if I want those links from right frame to open player in the bottom frame and to play clicked song?

5. Is there a way to place "download button" on the player for song that is currently playing?

6. Is there a way to have permanent playlist, without option to open/close?