yetangitu/ampache
1
0
Fork 0
mirror of https://github.com/Yetangitu/ampache synced 2025-10-05 10:49:37 +02:00
Code Issues Releases Wiki Activity

i've got a working html 5 player in jquery

Browse source
This commit is contained in:
John Moore 2013-07-31 23:12:35 -05:00
parent f21379318f
commit 3274f70dad
4 changed files with 13 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

15
lib/javascript/html5_player.js
View file

@ -114,13 +114,13 @@ function ended(event)
function search(event) function search(event)
{ {
var search = new RegExp(".*" + $('#input_search').val() + ".*", "i"); var search = new RegExp(".*" + $('#input_search').val() + ".*", "i");
$.each(playlist_items, function (index, item) { $.each(playlist_items, function (index, item) {
if (!search.test(item.title)) { if (!search.test(item.title)) {
item.element.hide(); item.element.hide();
}
else {
item.element.show();
} }
else {
item.element.show();
}
}); });
} }
function clear_search(event) function clear_search(event)
@ -135,9 +135,8 @@ $(document).ready(function() {
{ {
var li = $('<li>'); var li = $('<li>');
$('#playlist').append(li); $('#playlist').append(li);
playlist_items[id].play_url += '&transcode_to=mp3';// + (Prototype.Browser.IE || Prototype.Browser.WebKit || Prototype.Browser.MobileSafari ? 'mp3' : 'ogg');
li.html($('<span>').append(playlist_items[id].title)); li.html($('<span>').append(playlist_items[id].title));
playlist_items[id].player = $('<audio>').attr('preload', 'none').attr('src', playlist_items[id].play_url)[0]; //new Element("audio", {preload: Prototype.Browser.IE ? 'auto' : 'none', src : playlist_items[id].play_url}); playlist_items[id].player = $('<audio>').attr('preload', 'none').attr('src', playlist_items[id].play_url)[0];
var player = $(playlist_items[id].player); var player = $(playlist_items[id].player);
li.append(playlist_items[id].player); li.append(playlist_items[id].player);
li.data('playlist_item', playlist_items[id]); li.data('playlist_item', playlist_items[id]);

5
templates/html5_player.css
View file

@ -19,6 +19,11 @@
* *
*/ */
#html5_player {
min-width=250px;
}
#html5_player #albumart img #html5_player #albumart img
{ {
width: 200px; width: 200px;

2
templates/show_html5_player.inc.php
View file

@ -63,11 +63,11 @@ foreach($playlist->urls as $item)
<div id="album"><?php echo T_('Loading...') ?></div> <div id="album"><?php echo T_('Loading...') ?></div>
<div id="artist"><?php echo T_('Loading...') ?></div> <div id="artist"><?php echo T_('Loading...') ?></div>
<div id="progress_text"><?php echo T_('Loading...') ?></div> <div id="progress_text"><?php echo T_('Loading...') ?></div>
<button id="stop" accesskey="<?php echo T_dgettext('html5_player_accesskey', 'o') ?>"><?php echo T_('Stop') ?></button>
<button id="play" accesskey="<?php echo T_dgettext('html5_player_accesskey', 'p') ?>"><?php echo T_('Play') ?></button> <button id="play" accesskey="<?php echo T_dgettext('html5_player_accesskey', 'p') ?>"><?php echo T_('Play') ?></button>
<button id="pause" accesskey="<?php echo T_dgettext('html5_player_accesskey', 'p') ?>"><?php echo T_('Pause') ?></button> <button id="pause" accesskey="<?php echo T_dgettext('html5_player_accesskey', 'p') ?>"><?php echo T_('Pause') ?></button>
<button id="previous" accesskey="<?php echo T_dgettext('html5_player_accesskey', ',') ?>"><?php echo T_('Previous') ?></button> <button id="previous" accesskey="<?php echo T_dgettext('html5_player_accesskey', ',') ?>"><?php echo T_('Previous') ?></button>
<button id="next" accesskey="<?php echo T_dgettext('html5_player_accesskey', '.') ?>"><?php echo T_('Next') ?></button> <button id="next" accesskey="<?php echo T_dgettext('html5_player_accesskey', '.') ?>"><?php echo T_('Next') ?></button>
<button id="stop" accesskey="<?php echo T_dgettext('html5_player_accesskey', 'o') ?>"><?php echo T_('Stop') ?></button>
</div> </div>
<div> <div>
<ul id="playlist"> <ul id="playlist">

1
themes/classic/templates/default.css
View file

@ -36,7 +36,6 @@ a img, :link img, :visited img { border: 0; } /* no blue linked image borders */
body { body {
background:#d3d3d3; background:#d3d3d3;
font-family:Arial, Helvetica, Sans-Serif; font-family:Arial, Helvetica, Sans-Serif;
min-width:1000px;
} }
p { p {
color: #000; color: #000;