use html5 audio player instead of flash when possible

This commit is contained in:
Andrew Dolgov 2010-11-30 12:40:23 +03:00
parent d769a0f75a
commit c3edc667f1
5 changed files with 88 additions and 10 deletions

View File

@ -4463,14 +4463,38 @@
$entry = "";
if ($ctype == "audio/mpeg") {
$entry .= "<object type=\"application/x-shockwave-flash\"
data=\"extras/button/musicplayer.swf?song_url=$url\"
width=\"17\" height=\"17\" style='float : left; margin-right : 5px;'>
<param name=\"movie\" value=\"extras/button/musicplayer.swf?song_url=$url\" /> </object>";
if (strpos($ctype, "audio/") === 0) {
if ($_SESSION["hasAudio"] && (strpos($ctype, "ogg") !== false ||
strpos($_SERVER['HTTP_USER_AGENT'], "Chrome") !== false ||
strpos($_SERVER['HTTP_USER_AGENT'], "Safari") !== false )) {
$id = 'AUDIO-' . uniqid();
$entry .= "<audio id=\"$id\"\">
<source src=\"$url\"></source>
</audio>";
$entry .= "<span onclick=\"player(this)\"
title=\"".__("Click to play")."\" status=\"0\"
class=\"player\" audio-id=\"$id\">".__("Play")."</span>";
} else {
$entry .= "<object type=\"application/x-shockwave-flash\"
data=\"extras/button/musicplayer.swf?song_url=$url\"
width=\"17\" height=\"17\" style='float : left; margin-right : 5px;'>
<param name=\"movie\"
value=\"extras/button/musicplayer.swf?song_url=$url\" />
</object>";
}
}
$filename = substr($url, strrpos($url, "/")+1);
$entry .= " <a target=\"_blank\" href=\"" . htmlspecialchars($url) . "\">" .
$filename . " (" . $ctype . ")" . "</a>";
return $entry;
}
@ -6792,12 +6816,12 @@
if (!$ctype) $ctype = __("unknown type");
$filename = substr($url, strrpos($url, "/")+1);
# $filename = substr($url, strrpos($url, "/")+1);
$entry = format_inline_player($link, $url, $ctype);
$entry .= " <a target=\"_blank\" href=\"" . htmlspecialchars($url) . "\">" .
$filename . " (" . $ctype . ")" . "</a>";
# $entry .= " <a target=\"_blank\" href=\"" . htmlspecialchars($url) . "\">" .
# $filename . " (" . $ctype . ")" . "</a>";
array_push($entries_html, $entry);

View File

@ -307,6 +307,9 @@
// XML method
if ($subop == "sanityCheck") {
$_SESSION["hasAudio"] = $_REQUEST["hasAudio"] === "true";
print "<rpc-reply>";
if (sanity_check($link)) {
print "<error error-code=\"0\"/>";

View File

@ -1652,4 +1652,25 @@ a.bookmarklet {
top : -1px;
}
.player {
display : inline-block;
color : gray;
font-size : 11px;
font-family : sans-serif;
border : 1px solid gray;
padding : 0px 4px 0px 4px;
margin : 0px 2px 0px 2px;
width : 50px;
text-align : center;
background : white;
}
.player.playing {
color : #00c000;
border-color : #00c000;
}
.player:hover {
background : #f0f0f0;
cursor : pointer;
}

View File

@ -318,8 +318,10 @@ function init() {
loading_set_progress(20);
var hasAudio = !!((myAudioTag = document.createElement('audio')).canPlayType);
new Ajax.Request("backend.php", {
parameters: {op: "rpc", subop: "sanityCheck"},
parameters: {op: "rpc", subop: "sanityCheck", hasAudio: hasAudio},
onComplete: function(transport) {
backend_sanity_check_callback(transport);
} });

View File

@ -2365,3 +2365,31 @@ function editArticleNote(id) {
exception_error("editArticleNote", e);
}
}
function player(elem) {
var aid = elem.getAttribute("audio-id");
var status = elem.getAttribute("status");
var audio = $(aid);
if (audio) {
if (status == 0) {
audio.play();
status = 1;
elem.innerHTML = __("Playing...");
elem.title = __("Click to pause");
elem.addClassName("playing");
} else {
audio.pause();
status = 0;
elem.innerHTML = __("Play");
elem.title = __("Click to play");
elem.removeClassName("playing");
}
elem.setAttribute("status", status);
} else {
alert("Your browser doesn't seem to support HTML5 audio.");
}
}