「深層鏈接」，以與HTML5/Flash中MP3的某個位置

是否存在的代碼，其中，可以一起做的在YouTube上發生的事情的線類似的任何現有的例子，其中有可能「深層鏈接」到視頻中的某個位置，但用於MP3？「深層鏈接」，以與HTML5/Flash中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。我得到'TypeError：'null'不是一個對象（評估'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>

來源

2012-01-03 fakeguybrushthreepwood

實現HTML5/javascript所需的最大問題是它不提供對剪貼板的訪問。但是，如果您不介意爲用戶提供要手動複製的URL，則很容易完成。據我瞭解，如果你想寫入用戶的剪貼板，你需要使用像'幫助對象'的Flash。但是，我沒有Flash的經驗，所以不能幫你在這裏。

音頻對象提供浮子currentTime的，其可以容易地設置或檢索。同時你可以通過各種window.location variables來檢索URL和相關變量。在這裏我寫了函數get_url_variables將它們傳遞給哈希。如果你正在使用像jQuery這樣的庫，我強烈懷疑它提供了類似的東西，並且可能比我的快速示例更加穩定。

編輯：哎呀，我錯過了你的右鍵菜單請求。我從來不是這個的忠實粉絲，但是有關於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; 
}

來源

2012-01-04 01:07:22

非常感謝您的反饋。對不起，作爲一個試圖學習Javascript/HTML5的PHP開發人員，這只是我的頭腦 - 關於在哪裏學習如何整合這樣的東西的任何建議？ – fakeguybrushthreepwood 2012-01-05 19:46:49

對於一個好的資源，我不是最好的人選，因爲我的一般方法是使用多種資源，然後隨着我的理解的增加而改進我的方法。理解上述內容的一個很好的起點是確保獲得document.getElementById（'music'）位正在做什麼以及object.addEventListener位。（編輯：Hit enter too early）另外，我應該指出我的上面的例子並不好，因爲它創建了一些不必要的全局變量。而且，它現在只能應付一個音頻對象和相關的按鈕。 – 2012-01-05 20:42:38

我剛糾正了示例代碼中的一個錯誤，如果在URL中沒有定義GET屬性，音頻位置被設置爲'未定義'。 – 2012-01-05 21:06:12

「深層鏈接」，以與HTML5/Flash中MP3的某個位置

回答

相關問題