簡單的html5音頻播放器可在瀏覽器中使用，但不能在chrome擴展中使用

Question

在我的chrome擴展程序的background.js文件中，添加以下代碼：

function loadSong(url) {
    var urlRadio = "mydomain.com";
    document.getElementById("player").src=urlRadio + url;
    document.getElementById("player").load();
    document.getElementById("player").play();
}
window.addEventListener('load', loadSong);

並在html中：

<div>
    <audio tabindex="0" id="player" controls="controls">nothing</audio>
    <ul id="playlist">
        <li><a onclick="loadSong('one.mp3')">one</a></li>
        <li><a onclick="loadSong('two.mp3')">two</a></li>
    </ul>
</div>

我在首頁中，end標簽之前和chrome擴展的背景部分清單中添加了background.js。

我想像網頁和chrome擴展程序一樣使用此播放器，所以當我將代碼放在這里時：

• 瀏覽器加載時出現“未捕獲的TypeError：無法將屬性'src'設置為null”，但是我可以播放歌曲
• chrome擴展加載時出現“ Uncaught TypeError：無法將屬性'src'設置為null”，無法播放歌曲

有什么問題 ？

Answer 1

您的腳本中有兩個錯誤。 第一個是音頻文件的路徑，第二個是ur函數調用。 這是您可以嘗試的示例

HTML：

<div>
<audio tabindex="0" id="player" controls="controls">nothing</audio>
<ul id="playlist">
    <li><a onclick="loadSong('one.mp3')">one</a></li>
    <li><a onclick="loadSong('two.mp3')">two</a></li>
</ul>
</div>

腳本：

function loadSong(url) {
var urlRadio = "path/";
document.getElementById("player").src=urlRadio + url;
document.getElementById("player").load();
document.getElementById("player").play();
}
window.addEventListener('load', loadSong("your audio file name example one.mp3"));

您的第一個錯誤：錯誤的路徑

var urlRadio = "mydomain.com";
document.getElementById("player").src=urlRadio + url;

在這種情況下（urlRadio + url），src將變得像（mydomain.comone.mp3），這是錯誤的路徑，它必須像mydomain.com/one.mp3一樣。

您的第二個錯誤：沒有傳遞參數的函數調用

 window.addEventListener('load', loadSong);

您必須將url值傳遞給loadSong函數，例如：loadSong（“ one.mp3”）