JS修改了<audio>的src,但是不能播放音頻. chrome報(bào)錯(cuò)audio.load is not a function

我創(chuàng)建了一個(gè)table表格，期待的效果是當(dāng)鼠標(biāo)移動(dòng)到每個(gè)表格單元th上時(shí)，背景色會(huì)自動(dòng)變成白色，而且會(huì)播放一個(gè)的音頻。
現(xiàn)在的問(wèn)題是，單元格的背景色成功修改了，但是我用js修改了<audio>的src之后，沒(méi)有播放音頻。
音頻保存在同一目錄的songs文件夾下，格式為.ogg，JS修改src的部分代碼如下：

var audio = document.getElementsByTagName("audio");
    audio.src = "songs/" + this.id + ".ogg";
    audio.load();
    audio.play();

我用的瀏覽器是chrome，console輸出如下：

不知道是怎么回事，似乎別人沒(méi)有遇到audio.load is not a function的問(wèn)題。
當(dāng)我注釋掉audio.load()這行代碼之后，chrome會(huì)報(bào)錯(cuò)audio.play is not a function。

我查了一下，chrome是支持ogg格式的。
我確認(rèn)我的songs文件夾里有對(duì)應(yīng)名稱(chēng)的音頻。

我認(rèn)為，可能是我的代碼出錯(cuò)，或者chrome瀏覽器audio.load is not a function有問(wèn)題。但是我測(cè)試了firefox瀏覽器，得到的結(jié)果一樣。
下面分別是我的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>

//鼠標(biāo)事件：1.播放音樂(lè) 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";
            //播放音樂(lè)
            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;
        }
    }
}

希望能得到幫助，非常感謝！

回答

編輯回答

夢(mèng)若殤

JS代碼：

//鼠標(biāo)事件：1.播放音樂(lè) 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";
            //播放音樂(lè)
            playMusic(this.id);
        }
        tabs[i].onmouseout = function() {
            //改回原本的背景色
            this.style.backgroundColor = curColor;
        }
    }
    
}

function playMusic(thisId){
    var audio = document.getElementById("music");
    audio.src = "songs" + "/" + thisId + ".mp3";
    console.log(thisId + " " + audio.src);
    audio.play();
}

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="d5"> </th>
            <th class="_ffcccc" id="d3"> </th>
            <th class="_8696a7" id="d3"> </th>
            <th class="_fffaf4" id="d4"> </th>
            <th class="_cc9999" id="d2"> </th>
            <th class="_e3b4b8" id="d2"> </th>
            <th class="_eea2a4" id="d1"> </th>
            <th class="_8fb2b9" id="d3"> </th>
        </tr>
        </table>
        <audio src="" id="music"></audio>
        <script src="colorAndMusic.js"></script>
    </body>
</html>

除了修改代碼之外，發(fā)現(xiàn)ogg格式播放有問(wèn)題。雖然chrome支持ogg，但只要更換成MP3格式就能正常播放。

2017年12月24日 19:19