Running music in the background from google chrome extension

Question

I am making a google chrome extension, where you press certain buttons, it starts, pauses, or restarts a song. I got it working but there is one problem. When I close the extension, the song stops! I need to know if there is a way around this. I have looked into background scripts and stuff, but I can't get them to work. Please help as this is one of my first google chrome extensions, and I would like to learn more. Thanks for any help you give me!

Html: (popup.html)

<html>
<head>

<link rel="stylesheet" href="styles.css">
<script src="popup.js"></script>


</head>
<body>

<center>
<h1>Music Player</h1>
<h3>Songs:</h3>

<div id="ludicrous_speed">Ludicrous Speed 
<audio id="ludicrous" src="songs/ludicrous_speed.mp3" preload="auto"></audio>
<button class="Start" id="StartLudicrous">Start</button>
<button class="Pause" id="PauseLudicrous">Pause</button> 
<button class="Restart" id="RestartLudicrous">Restart</button>
</div>

</center>

</body>
</html>

Javascript: (popup.js)

function Start(song) {
song.play();
}

function Pause(song) {
song.pause();
}

function Restart(song) {
song.currentTime = 0;
}

document.addEventListener('DOMContentLoaded', function(){
var Start_Ludicrous = document.getElementById('StartLudicrous');
var Pause_Ludicrous = document.getElementById('PauseLudicrous');
var Restart_Ludicrous = document.getElementById('RestartLudicrous');

Start_Ludicrous.addEventListener('click', function() {
    Start(ludicrous);
});
Pause_Ludicrous.addEventListener('click', function() {
    Pause(ludicrous);
});
Restart_Ludicrous.addEventListener('click', function() {
    Restart(ludicrous);
});
});

CSS: (styles.css)

body {

width:300px;

}

.Start {
background-color: #42f46e;
border-color: #42f46e;
border-radius: 30%;
}

.Pause {
background-color: #f4e349;
border-color: #f4e349;
border-radius: 30%;
}

.Restart {
background-color: #e03838;
border-color: #e03838;
border-radius: 30%;
}

Manifest: (manifest.json)

{
"manifest_version":2,

"name":"Music Player",
"description":"Play Music",
"version":"1.0",

"browser_action":{
    "default_popup":"popup.html"
},

"permissions":[
    "activeTab"
]
}

Answer 1

The document that popup.html creates exists only as long as it's open.

The moment the popup closes the <audio> element no longer exists.

A background page provides a solution to that - it exists independently of the popup.

You don't normally create a background page's HTML yourself, only provide a bunch of scripts. But nothing stops you from creating a DOM node on the fly:

// background.js
var audio_element = document.createElement("audio");
audio_element.src = "songs/ludicrous_speed.mp3";

audio_element.play();

Now, the popup's code won't be able to directly access the audio_element of the background page; you could do a quick hack job with getBackgroundPage methods, but it's preferable to learn how Messaging works and use chrome.runtime.sendMessage from the popup to control the background.

Running music in the background from google chrome extension

Question

1 answers

solution1
3 ACCPTED 2018-11-02 11:28:54

Running music in the background from google chrome extension

Question

1 answers

solution1 3 ACCPTED 2018-11-02 11:28:54

solution1
3 ACCPTED 2018-11-02 11:28:54