Sure. It is maybe a bit advanced, but I will try.
I have made comments to the html file, so everything it does it explained there.
Basically it is a new player function, it can do about the same as the included, and a bit more, and then it will run in the background, and supports airplay too (Not tested on Android, so if anyone tries that, please report back if it works)
You will have to add a webview to your app, and set is as hidden (There is no text in the page anyway).
Upload below html to the app and point the webview url to it on load.
Then create 3 functions for Play, Pause and Resume
For getting states from the player use the webview function “When webview receives message”
Example:
You should probably use a app variable to keep track of current playerstate in the app, so other functions of your app knows if it is playing or not.
Player: (Also attached if formatting is broken in the post player.html.zip (1.6 KB) )
Player
</head>
<body>
<audio id="myAudio">
<source src="" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
//-- Playerstates --//
// 1 = Playback started
// 2 = Pause
// 3 = Playback ended
// Json object {"State": "Playing", "pos", "{Playback position}"} //Tells the app current playback position
// -----------------//
// Recieve messages fon the app
ThunkableWebviewerExtension.receiveMessage(function(message) {
// Messages are send as objects from app
var JSONobj = JSON.parse(message);
// If state in the object is Play
if (JSONobj.state == "Play") {
//Set audip tag src url to url from json
document.getElementById("myAudio").setAttribute('src', JSONobj.url);
//Change the title of the webpage to title from the object, so played title is vissible on then lockscreen
document.title = JSONobj.title;
//Start player
playAudio();
// Tell the app that playback is started
ThunkableWebviewerExtension.postMessage('1');
// If the state in the object is pause
} else if (JSONobj.state == "Pause") {
// Pause player
pauseAudio();
// Tell the app that playback is paused
ThunkableWebviewerExtension.postMessage('2');
// If state in the object is Resume
} else if (JSONobj.state == "Resume") {
// Start playback (Without setting new src, so player continues playback of last source)
playAudio();
// Tell the app that playback is resumed
ThunkableWebviewerExtension.postMessage('1');
}
});
//Player controlls
var x = document.getElementById("myAudio");
//Start playback
function playAudio() {
x.play();
}
// Pause playback
function pauseAudio() {
x.pause();
}
// Event listener for playback ended.
document.getElementById('myAudio').addEventListener('ended',myHandler,false);
function myHandler(e) {
ThunkableWebviewerExtension.postMessage("3");
}
// Player monitor to return playback time from player (Returns a json object to the app)
// Runs every 2 seconds to give time to start playback (So time jumps 2 seconds each time)
var playMon = setInterval(function(){
var myAudio1 = document.getElementById('myAudio');
// Check if playback duration is increacing and player is in playing
if (myAudio1.duration > 0 && !myAudio1.paused) {
// Calculate duration, and disply it in correct form.
var time = Math.floor(myAudio1.currentTime);
var minutes = Math.floor(time / 60);
var seconds = time - minutes * 60;
var finalTime = str_pad_left(minutes,'0',2)+':'+str_pad_left(seconds,'0',2);
// Tell the app the position
ThunkableWebviewerExtension.postMessage('{"state": "Playing", "pos": "' + finalTime + '"}');
} else {
// Tell app that music is not playing
ThunkableWebviewerExtension.postMessage("0");
}
}, 2000);
// Used to format time correctly
function str_pad_left(string,pad,length) {
return (new Array(length+1).join(pad)+string).slice(-length);
}
</script>
</body>
</html>
