<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<style type="text/css">
.run {
background-color: #f99;
}
</style>
</head>
<body>
<audio src="F:\My Music\流行歌曲\S.H.E—十面埋伏.mp3" controls="controls" autoplay="autoplay" id="audio">你的浏览器不支持audio标签</audio>
<ul class="list">
<li class="run"> S.H.E—十面埋伏.mp3</li>
<li> 青花瓷.mp3 </li>
<li> 星月神话.mp3 </li>
</ul>
<script type="text/javascript">
var slice = Array.prototype.slice;
var audio = document.querySelector("audio");
var items = slice.call(document.querySelectorAll(".list li"),0);
items.forEach(function(item){
item.addEventListener("click", function(){
var run = document.querySelector("li.run");
run.className = "";
item.className = "run";
//去掉前后的空格
var str1 = run.innerHTML.replace(/^\s+|\s+$/g,"");
var str2 = item.innerHTML.replace(/^\s+|\s+$/g,"");
//谷歌浏览器audio.src获取的地址中的中文是经过编码的,要用decodeURI()解码
var src = decodeURI(audio.src).replace(str1,str2);
console.log(src); //看看replace()是不是真的替换了
audio.src = src;
});
});
</script>
</body>
</html>