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>

我在首页，结束标记之前和chrome扩展程序的背景部分清单中添加了background.js.

我想像网页一样使用这个播放器，就像Chrome扩展一样，所以当我把代码放在这里时：

＆＃34; Uncaught TypeError：无法设置属性＆＃39; src＆＃39; of null＆＃34;在在浏览器中加载，但我可以播放歌曲
＆＃34; Uncaught TypeError：无法设置属性＆＃39; src＆＃39; of null＆＃34;在Chrome扩展程序中加载时，无法播放歌曲

问题是什么？

Answer 1

你的脚本有两个错误。第一个是音频文件的路径，第二个是你的函数调用。这是你可以尝试的样本

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”）

简单的html5音频播放器可在浏览器中使用，但不能在Chrome扩展中使用

1 个答案: