由前端脚本控制的后台音频播放器 - chrome 扩展

我能够在后台设置音频元素并从内容脚本进行控制。但是，我正在创建两个音频元素，并且由于我希望内容脚本音频元素是普通播放器（带有播放按钮和控件），因此声音始终重叠。两个播放器在后台和内容脚本中同时播放。如果我要在内容脚本中使用一个简单的按钮来控制背景音频元素，它会起作用，因为前面没有要播放的音频元素，我只会告诉背景音频播放/停止播放。音频元素需要一个...我该怎么做？

//CONTENT SCRIPT

document.addEventListener('DOMContentLoaded', function() {
   var audioEL = document.getElementById('stream');
   audioEL.addEventListener('play', streamOrder);
   audioEL.addEventListener('pause', streamOrder);
});


function streamOrder () {
   chrome.extension.sendMessage({ msg: "manageStream" });
}


// BACKGROUND SCRIPT
var STREAM_STATE = false

function manageStream () {
if(!STREAM_STATE) {
    if(document.getElementById('player') == undefined) document.write('<audio id="player" src="XXXXX">');
    document.getElementById('player').play();
    STREAM_STATE = true
}
  else {
    document.getElementById('player').pause();
    STREAM_STATE = false
  }
}