87,996
社区成员
发帖
与我相关
我的任务
分享JS修改了audio的src之后，audio.load()失效
期待实现的效果是，当鼠标移动到table表格中的每个格子th上时，表格单元的背景色变白且播放不同的音乐。我给每个单元格都添加了onmouseover事件函数。
html代码如下：
js代码如下：
我在chrome的运行结果是：
表格里只有第一行第一个格子能发出声音，其他的都不行。但奇怪的是，鼠标在第一个格子上时，audio.load()也是输出不能加载。
想知道如何让其他格子也发出声音，先谢过各位大佬！
html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color and Music</title>
<link rel="stylesheet" href="colorAndMusic.css">
</head>
<body>
<table id="colorTable">
<tr>
<th class="_ffffcc" id="a0"> </th>
<th class="_ffcccc" id="a1"> </th>
<th class="_8696a7" id="a2"> </th>
<th class="_fffaf4" id="a3"> </th>
<th class="_ff9999" id="a4"> </th>
<th class="_cc8899" id="a5"> </th>
<th class="_ff9999" id="a6"> </th>
<th class="_cc8899" id="a7"> </th>
</tr>
</table>
<audio src="" id="music"></audio>
<script src="colorAndMusic.js"></script>
</body>
</html>
js代码如下：
//鼠标事件：1.播放音乐 2.更改背景色
function mouseEvent_changeColor() {
var tabs = document.getElementsByTagName("th");
var tabsLen = tabs.length;
for(var i=0;i<tabsLen;++i) {
var curColor;
tabs[i].onmouseover = function() {
//更改背景色
curColor = this.style.backgroundColor;
this.style.backgroundColor = "#fff";
//播放音乐
playMusic(this.id);
}
tabs[i].onmouseout = function() {
//改回原本的背景色
this.style.backgroundColor = curColor;
}
}
}
function playMusic(thisId){
var audio = document.getElementById("music");
audio.src = "songs" + "/" + thisId + ".ogg";
console.log(thisId + " " + audio.src);
if(!audio.load()) console.log("不能加载");
audio.load();
if(!audio.play()) console.log("不能播放");
audio.play();
}
我在chrome的运行结果是：
表格里只有第一行第一个格子能发出声音，其他的都不行。但奇怪的是，鼠标在第一个格子上时，audio.load()也是输出不能加载。
想知道如何让其他格子也发出声音，先谢过各位大佬！
...全文
请发表友善的回复…
发表回复
Zelda256 2018-04-23
- 打赏
- 举报
感谢，但其他的表格单元还是没有声音，只有第一个格子能播放。如果你知道如何解决的话，请指教，谢谢。[/quote]
代码没问题，是不是ogg文件的问题[/quote]
感谢你的回复！问题已经解决。我使用的浏览器是chrome，是支持ogg格式的，而且这些文件用本地播放器来播放的话，能听到声音，因此我一直以为是代码的问题。直到我看到您的回复，尝试了播放其他音频文件，测试结果是代码没有问题。再次感谢你！
天际的海浪 2018-04-23
- 打赏
- 举报
感谢，但其他的表格单元还是没有声音，只有第一个格子能播放。如果你知道如何解决的话，请指教，谢谢。[/quote]
代码没问题，是不是ogg文件的问题
Zelda256 2018-04-23
- 打赏
- 举报
感谢，但其他的表格单元还是没有声音，只有第一个格子能播放。如果你知道如何解决的话，请指教，谢谢。
天际的海浪 2018-04-23
- 打赏
- 举报
这样 if(!audio.load()) console.log("不能加载"); 没用
直接这样
function playMusic(thisId){
var audio = document.getElementById("music");
audio.src = "songs" + "/" + thisId + ".ogg";
console.log(thisId + " " + audio.src);
audio.play();
}
