use html5 audio player instead of flash when possible

functions.php

@@ -4463,13 +4463,37 @@
 
 		$entry = "";
 
-		if ($ctype == "audio/mpeg") {  
+		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>";  
+					<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) . "\">" .
+#				$entry .= " <a target=\"_blank\" href=\"" . htmlspecialchars($url) . "\">" .
-					$filename . " (" . $ctype . ")" . "</a>";
+#					$filename . " (" . $ctype . ")" . "</a>";
 	
 				array_push($entries_html, $entry);
 	

modules/backend-rpc.php

@@ -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\"/>";

tt-rss.css

@@ -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;
+}
 

tt-rss.js

@@ -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);
 				} });

viewfeed.js

@@ -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.");
+	}
+}
+