I created a table table, and the expected effect is that when the mouse moves over each table cell th, the background color automatically turns white and an audio is played. The problem with
now is that the background color of the cell has been successfully modified, but after I modified the src of
var audio = document.getElementsByTagName("audio");
audio.src = "songs/" + this.id + ".ogg";
audio.load();
audio.play();the browser I use is chrome,console output as follows:
audio.load is not a function
audio.load()chromeaudio.play is not a function
chromeogg
songs
I think there may be something wrong with my code, or there is something wrong with the chrome browser audio.load is not a function. But I tested the firefox browser and got the same result.
here are my html code and js code:
<!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;PPi) {
var curColor;
tabs[i].onmouseover = function() {
//
curColor = this.style.backgroundColor;
this.style.backgroundColor = "-sharpfff";
//
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;
}
}
}hope to get help, thank you very much!