当前位置： 文江博客话题详情

“深层链接”使用 HTML5/Flash 到 MP3 中的某个位置

发布于 2024-12-24 19:48:46 字数 4774 浏览 2 评论 0原文

是否有任何现有的代码示例可以执行类似于 YouTube 上发生的操作，从而可以“深度链接”到视频中的某个位置，但对于 MP3 而言？

例如，作为在 YouTube 上如何完成此操作的示例，正​​常链接是： http://www.youtube.com/watch?v=W3ZHPJT2Kp4

可以在某个时间点鼠标右键单击播放位置图标，选择“复制当前时间的视频URL”，例如选择14秒，得到如下链接： http://www.youtube.com/watch?feature=player_detailpage& ;v=W3ZHPJT2Kp4#t=14s

我想通过深度链接到我想要的 MP3 来完成同样的事情在网页上播放。

我见过一些 HTML5 MP3 播放器，例如 Jplayer (http://www.jplayer.org)，但我还没有看到它提供这种功能。

有什么线索、提示、建议来开始实现这样的目标吗？我想我更喜欢使用 HTML5，但会考虑 Flash。

更新（11/01/2012）： 当我点击“Click Me!”时，我收到“TypeError: 'null' is not an object (evaluating 'music.currentTime = att_hash['a']')”按钮。

<!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>
原文

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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

王权女流氓 2024-12-31 19:48:46

使用 HTML5/javascript 实现您想要的最大问题是它不提供对剪贴板的访问。但是，如果您不介意向用户提供要手动复制的 URL，那么完成起来相当容易。据我了解，如果您想写入用户的剪贴板，您需要使用诸如 Flash“帮助对象”之类的东西。不过我没有闪存经验，所以无法在这里为您提供帮助。

音频对象提供了可以轻松设置或检索的浮点 currentTime。同时，您可以使用各种 window.location 变量。在这里，我编写了函数 get_url_variables 将它们传递到哈希中。如果您使用的是 jquery 这样的库，我强烈怀疑它提供了类似的东西，并且可能比我的快速示例稳定得多。

编辑：哎呀，我错过了您对右键菜单的请求。我从来都不是这个的忠实粉丝，但有关于 在此处添加右键单击响应。

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

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;
}
回复 原文
~没有更多了~

关于作者

世界和平

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

夢野间

文章 0 评论 0

百度③文鱼

文章 0 评论 0

小草泠泠

文章 0 评论 0

zhuwenyan

文章 0 评论 0

weirdo

文章 0 评论 0

坚持沉默

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文