与<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>标签时，文件类型匹配

回答

相关问题