雾漫于山谷 2021-04-21 15:47 采纳率: 100%
浏览 49
已采纳

我点击歌曲 不对应播放 只会一直播放同一首 求助大佬

展开全部

  • 写回答

6条回答 默认 最新

  • 关注
    <!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>

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(5条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 vue请求不到数据,返回状态200,数据为html
  • ¥15 访问url时不会自动调用其 Servlet的doGet()
  • ¥15 用白鹭引擎开发棋牌游戏的前端为什么这么难找
  • ¥15 MATLAB解决问题
  • ¥35 哪位专业人士知道这是什么原件吗?哪里可以买到?
  • ¥15 关于#c##的问题:treenode反序列化后获取不到上一节点和下一节点,Fullpath和Handle报错
  • ¥15 一部手机能否同时用不同的app进入不同的直播间?
  • ¥20 输入import torch显示Intel MKL FATAL ERROR,系统驱动1%,: Cannot load mkl_intel_thread.dll.
  • ¥15 点云密度大则包围盒小
  • ¥15 nginx使用nfs进行服务器的数据共享
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部