Play a Music List

Here's the code

Please read through the code and add your own music folder id and some default.mp3's if you want them. I used them to help me build the code. This took me about 4 hours. `createMusicList()` creates a music list from your music folder and puts checkboxes in the last column. The code loads the selections based upon which checkboxes are checked in the MusicList sheet. This version takes the mp3 files stored in your Music Folder and converts them to dataURI's and loads them into the audio element on your client html. It allows you to skip over a selection to the next and to restart the playlist when it ends. It's playing in the background right now as I type.

music1.html

<!DOCTYPE html>

<html>

<head>

<style>

label{margin:2px 10px;}

</style>

</head>

var selectionList=["BarbaraAnn.mp3","Don't Let Me Come Home a Stranger.mp3"];

var gVolume=0.2;

var index=0;

$(function(){

document.getElementById('msg').innerHTML="Loading Playlist";

google.script.run

.withSuccessHandler(function(Obj){

selectionList=Obj.playlist;

console.log(Obj.playlist);

document.getElementById('list').innerHTML=Obj.html;

google.script.run

.withSuccessHandler(function(fObj){

$('#audio1').attr('src',fObj.uri);

var audio=document.getElementById("audio1");

audio.volume=gVolume;

audio.onended=function() {

document.getElementById('status').innerHTML='Ended...';

playnext();

}

var msg=document.getElementById('msg');

msg.innerHTML="Click play to begin playlist. Additional selections will begin automatically";

audio.onplay=function() {

document.getElementById('msg').innerHTML='Playing: ' + selectionList[index-1];

document.getElementById('status').innerHTML='Playing...';

document.getElementById('skipbtn').disabled=false;

}

audio.onvolumechange=function(){

gVolume=audio.volume;

}

})

.convMediaToDataUri(selectionList[index++]);

})

.getPlaylist();

});

function playnext() {

if(index<selectionList.length) {

document.getElementById('status').innerHTML='Loading...';

document.getElementById('msg').innerHTML='Next Selection: ' + selectionList[index];

google.script.run

.withSuccessHandler(function(fObj){

$('#audio1').attr('src',fObj.uri);

var audio=document.getElementById('audio1');

audio.volume=gVolume;

audio.play();

})

.convMediaToDataUri(selectionList[index++]);

}else{

document.getElementById('status').innerHTML='Playlist Complete';

document.getElementById('msg').innerHTML='';

document.getElementById('cntrls').innerHTML='<input type="button" value="Replay Playlist" onClick="replayPlaylist()" />';

}

function replayPlaylist() {

index=0;

document.getElementById('cntrls').innerHTML='';

playnext();

}

function skip() {

var audio=document.getElementById('audio1');

document.getElementById('skipbtn').disabled=true;

audio.pause();

playnext();

}

</script>

<body>

</body>

</html>

Code.gs

function onOpen() {

SpreadsheetApp.getUi().createMenu('My Music')

.addItem('Launch Music', 'launchMusicDialog')

.addItem('Create New Music List', 'createMusicList')

.addToUi();

}

function convMediaToDataUri(filename){

var filename=filename || "You Make Loving Fun.mp3";

var folder=DriveApp.getFolderById("1IF-n_jAkAJyZWGewCMWln95YvxsApTd5");

var files=folder.getFilesByName(filename);

var n=0;

while(files.hasNext()) {

var file=files.next();

n++;

}

if(n==1) {

var blob=file.getBlob();

var b64DataUri='data:' + blob.getContentType() + ';base64,' + Utilities.base64Encode(blob.getBytes());

Logger.log(b64DataUri)

var fObj={filename:file.getName(),uri:b64DataUri}

return fObj;

}

throw("Multiple Files with same name.");

return null;

}

function launchMusicDialog() {

var userInterface=HtmlService.createHtmlOutputFromFile('music1');

SpreadsheetApp.getUi().showModelessDialog(userInterface, 'Music');

}

function doGet() {

return HtmlService.createHtmlOutputFromFile('music1').addMetaTag('viewport', 'width=device-width, initial-scale=1');

}

function createMusicList() {

var ss=SpreadsheetApp.getActive();

var sh=ss.getSheetByName("MusicList");

var folder=DriveApp.getFolderById("1IF-n_jAkAJyZWGewCMWln95YvxsApTd5");

var files=folder.getFiles();

var mA=[['Item','File Name','File Type','File Id','Play List']];

sh.clearContents()

var n=1;

while(files.hasNext()) {

var file=files.next();

mA.push([n++,file.getName(),file.getMimeType(),file.getId(),'']);

}

sh.getRange(1,1,mA.length,mA[0].length).setValues(mA);

sh.getRange(2,2,sh.getLastRow()-1,sh.getLastColumn()-1).sort({column:2,ascending:true});

sh.getRange(2,5,sh.getLastRow()-1,1).insertCheckboxes();

}

function getPlaylist() {

var ss=SpreadsheetApp.getActive();

var sh=ss.getSheetByName('MusicList');

var rg=sh.getRange(2,1,sh.getLastRow()-1,sh.getLastColumn());

var vA=rg.getValues();

var pl=[];

var html='<style>th,td{border:1px solid black;}</style><table><tr><th>Index</th><th>FileName</th></tr>';

for(var i=0;i<vA.length;i++) {

if(vA[i][4]) {

pl.push(vA[i][1]);

html+=Utilities.formatString('<tr><td>%s</td><td>%s</td></tr>',vA[i][0],vA[i][1]);

}

html+='</table>';

return {playlist:pl,html:html};

}

Here's what the dialog looks like:

And this is what my playlist selector looks like: