极客观点
项目管理
HarmonyOS
我创建了一个table表格，期待的效果是当鼠标移动到每个表格单元th上时，背景色会自动变成白色，而且会播放一个的音频。
现在的问题是，单元格的背景色成功修改了，但是我用js修改了<audio>的src之后，没有播放音频。
音频保存在同一目录的songs文件夹下，格式为.ogg，JS修改src的部分代码如下：
var audio = document.getElementsByTagName("audio");
audio.src = "songs/" + this.id + ".ogg";
audio.load();
audio.play();我用的浏览器是chrome，console输出如下：
不知道是怎么回事，似乎别人没有遇到audio.load is not a function的问题。
当我注释掉audio.load()这行代码之后，chrome会报错audio.play is not a function。
我查了一下，chrome是支持ogg格式的。
我确认我的songs文件夹里有对应名称的音频。
我认为，可能是我的代码出错，或者chrome浏览器audio.load is not a function有问题。但是我测试了firefox浏览器，得到的结果一样。
下面分别是我的html代码和js代码：
<!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="songs/a0.ogg"></audio>
<script src="colorAndMusic.js"></script>
</body>
</html>//鼠标事件：1.播放音乐 2.更改背景色
function mouseEvent() {
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";
//播放音乐
var audio = document.getElementsByTagName("audio");
audio.src = "songs/" + this.id + ".ogg";
//console.log(audio.src);
audio.load();
audio.play();
}
tabs[i].onmouseout = function() {
//改回原本的背景色
this.style.backgroundColor = curColor;
}
}
}希望能得到帮助，非常感谢！
html5
JS代码：
HTML代码：
除了修改代码之外，发现ogg格式播放有问题。虽然chrome支持ogg，但只要更换成MP3格式就能正常播放。