替换& lt; a>带有<audio标签>当文件类型匹配时

Replace <a> tags with <audio tags> when file type is matched

本文关键字：类型 文件 lt 带有 替换 audio 标签      更新时间：2023-09-26

我尝试创建一个greaseMonkey脚本，该脚本将检查带有<a>标记的mp3页面，并将其替换为来自html5的<audio>标记。但我不太明白该怎么做。谁能指出我哪里错了吗?谢谢。

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

最简单的方法，既不使用任何框架，也不影响全局作用域。

注意 -如果你将从最后到第一个通过锚进行迭代，那么你将能够在每个锚之前插入一个元素并在同一循环中删除。

 ( 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' ) );

进行替换的行是findAtags[0]而不是findAtags[i]。

还有，你在那里用document.write做什么?

我可以提供以下内容，尽管看起来应该有可能使其更简洁:

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…)来"看到"它们在那里。

相关文章：