"Deeplink" to a certain position in an MP3 with HTML5/Flash

Question

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>

score 3 · Accepted Answer · edited May 23 '17 at 10:28

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.

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

Thank you very much for the feedback. Sorry, as a PHP developer who is trying to learn Javascript/HTML5 this is just way over my head - any suggestions for where to learn how to integrate something like this? — fakeguybrushthreepwood, Jan 05 '12 at 19:46
I'm not really the best person to ask with respect to a good resource, as my general approach was to use multiple resources, and then refine my approaches as my understanding increased. A good staring point for understanding the above would be to make sure you get what the document.getElementById('music') bits are doing, and the object.addEventListener bits. (Edit: Hit enter too early) Also, I should point out that my example above isn't great, as it creates a host of unnecessary global variables. Also, as it stands, it can only cope with one audio object, and associated button. — James Glover, Jan 05 '12 at 20:42
I just corrected a bug in the sample code, the audio position was being set to 'undefined' if no a GET attribute was defined in the URL. — James Glover, Jan 05 '12 at 21:06
Thank you for the reply. I guess the challenging thing for me is I don't know even where to begin. What additional items do I need to add to my page apart from the source displayed above? I am assuming I have to add a button somewhere on the page - but I'm at the level of this where I'm not entirely sure where I'd start. — fakeguybrushthreepwood, Jan 06 '12 at 00:49
Okay, I added on what I believe I should be doing thanks to @james-g — fakeguybrushthreepwood, Jan 09 '12 at 18:24

"Deeplink" to a certain position in an MP3 with HTML5/Flash

1 Answers1