Are there any existing examples of code where it is possible to do something similar along the lines of what occurs on YouTube whereby it is possible to ‘deeplink’ to a certain position in a video, but for an MP3 instead?
For instance, as an example of how this is done on YouTube, the normal link is:
http://www.youtube.com/watch?v=W3ZHPJT2Kp4
It is possible to right mouse click the playing position icon at a certain time, and select ‘Copy video URL at current time’, and for instance select at 14s and get a link like this:
http://www.youtube.com/watch?feature=player_detailpage&v=W3ZHPJT2Kp4#t=14s
I’d like to do the same thing by deeplinking to an MP3 that I’d like to play on a webpage.
I’ve seen some HTML5 MP3 players such as Jplayer (http://www.jplayer.org), but I haven’t seen this kind of functionality offered in it.
Any clues, hints, suggestions to start to achieve like this? I think I’d prefer to use HTML5 but would consider Flash.
Update (11/01/2012):
I’m getting ‘TypeError: ‘null’ is not an object (evaluating ‘music.currentTime = att_hash[‘a’]’)’ when I click on the ‘Click Me!’ button.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<!-- Website Design By: www.happyworm.com -->
<title>Demo : jPlayer as an audio player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="http://www.jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function (event) {
$(this).jPlayer("setMedia", {
m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a"
});
},
swfPath: "js",
supplied: "m4a, oga",
wmode: "window"
});
});
//]]>
</script>
</head>
<body>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
</div>
<div class="jp-title">
<ul>
<li>A Song</li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
<br><br>
<button id="gettime">Click Me!</button>
<input type="text" id="showtime">
<script language="javascript">
var music = document.getElementById('music') // Your <audio> object
var gettime = document.getElementById('gettime') // A 'get time' button
var showtime = document.getElementById('showtime') // An input text object for displaying the URL
gettime.addEventListener("click", function(){
showtime.value = window.location.protocol+'//'+window.location.host+window.location.pathname+'?a='+music.currentTime;
}, true);
window.addEventListener('load', function(){
var att_hash = get_url_variables()
if (att_hash) {
music.currentTime = att_hash['a']
}
}, true);
function get_url_variables() {
var att_hash = []
var var_array = window.location.search.split(/[\?&]/)
for (i=0; i<var_array.length; i++) {
if (var_array[i] != "") {
var att_var = var_array[i].split("=",2)
att_hash[att_var[0]]=att_var[1]
}
}
return att_hash;
}
</script>
</body>
</html>
The biggest issue with accomplishing what you want with HTML5/javascript is that it doesn’t provide access to the clipboard. However if you don’t mind providing a user with a URL to copy manually, it’s fairly easy to accomplish. As I understand it, if you want to write to the user’s clipboard, you need to use something like a flash ‘helper object.’ However I have no flash experience so can’t help you here.
The audio object provides the float currentTime, which can easily be set or retrieved. Meanwhile you can retrieve the URL and associated variables, with the various window.location variables. Here I’ve written the function get_url_variables to pass them into a hash. If you are using a library such as jquery I strongly suspect it provides something similar, and probably far more stable than my quick example.
Edit: Whoops, I missed your request for a right click menu. I’m never a great fan of this, but there is discussion on adding right click responses here.