简单的html5音频播放器在浏览器中工作，但不是在chrome扩展

Simple html5 audio player works in browser but not in chrome extension

本文关键字：扩展 chrome 工作 html5 音频 播放器 浏览器 简单      更新时间：2023-09-26

在我的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>

我在主页中添加了background.js，在结束标签之前和在chrome扩展的背景部分清单中。

我想使用这个播放器就像一个网页，就像一个chrome扩展，所以当代码我把它放在这里:

  • "Uncaught TypeError: Cannot set property 'src' of null在浏览器中加载，但我可以播放歌曲
  • "Uncaught TypeError: Cannot set property 'src' of null " at loading in chrome extension, Cannot play songs

有什么问题吗?

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

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.com .mp3)这是错误的路径，它必须像mydomain.com/one.mp3 .

第二个错误:函数调用没有传递参数 
 window.addEventListener('load', loadSong);

你必须将url值传递给loadSong函数就像这样loadSong("one.mp3")

相关文章：