简单的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”）