與<audio tags>更換<a>標籤時，文件類型匹配

我試圖創建一個的Greasemonkey腳本，將檢查頁面標記後的<a>標籤的MP3，並與HTML5的<audio>標籤替換它們。但我無法理解如何做到這一點。有人能指出我在這裏出錯的地方嗎？謝謝。與<audio tags>更換<a>標籤時，文件類型匹配

<html><body> 
<!-- tags, might ir might not have ids --> 
<a id="myid" href="mp3/basic.phrases.1.mp3">Some mp3 file1.mp3</a><br /> 
<a href="mp3/basic.phrases.2.mp3">Some mp3 file2.mp3</a><br /> 

<script language="JavaScript"> 
var findAtags = document.getElementsByTagName('a'); 

for(var i = 0; i < findAtags.length; i++) { 
var audioTag = document.createElement("audio"); 
var ext = findAtags[i].getAttribute("href").split('.').pop(); 

if(ext == "mp3") { 
    document.write(findAtags[i] + '[' + i + '] == ' + ext + '<br>'); 
    document.body.replaceChild(audioTag, findAtags[0]); 
    // I would need to replace the <a href="..." ></a> with '<audio> <source src="' + findAtags[i] + '" type="audio/mp3" /> </audio>'; 
}; 
} 
</script> 

</body></html>

來源

2011-12-23 user569548

的可能重複的[檢測並修改MP3鏈接的javaScript]（http://stackoverflow.com/questions/8586386/detecting-and-changing-mp3-links-javascript） – Incognito 2011-12-23 21:47:45

，做替換具有findAtags[0]代替findAtags[i]線。

另外，你在做什麼document.write呢？

來源

2011-12-23 21:44:49

我可以提供以下，但現在看來似乎應該有可能使之更加簡潔：

var body = document.getElementsByTagName('body')[0]; 
var as = body.getElementsByTagName('a'); 

for (var i=0,len=as.length; i<len; i++){ 
    var source = as[i].href; 
    var audioElem = document.createElement('audio'); 
    audioElem.src = source; 

    body.insertBefore(audioElem,as[i].nextSibling);  
} 

for (var r=as.length - 1; r>=0; r--){ 
    body.removeChild(as[r]); 
}

JS Fiddle demo。

請記住，audio元素本質上是「不可見的」，所以雖然鏈接被替換爲audio元素，但您必須查看DOM（通過Web Inspector，Firebug，Dragonfly ...）以查看'他們在那裏...

來源

2011-12-23 21:56:00

最簡單的方式，沒有使用任何框架和亂拋垃圾的全球範圍。

注意 - 如果您將由錨從最後到第一遍迭代，那麼您將能夠在每個元素之前插入一個元素並在同一個循環中刪除。

(function(a) { 
    for(var i = a.length; i--;) { 
     var e = a[i], 
      audio = document.createElement('audio'), 
      p = e.parentNode; 

     audio.src = e.href; 
     p.insertBefore(audio, e); 
     p.removeChild(e); 
    } 

    }) (document.getElementsByTagName('a'));

來源

2011-12-23 22:26:19 abuduba

與<audio tags>更換<a>標籤時，文件類型匹配

回答

相關問題