CODEWITHSUNDEEP
audiogoogle-apps-script
Mr PizzaGuy
Mr PizzaGuy

Reputation: 460

Is there a way to play background music using Google Apps Script?

I am creating an add-on which would ask the user to select music from a list and it would play it as background music. But previous posts show a sidebar with the user manually pressing the play button. I am wondering if there is a way to play it with Google Apps Script only. Also what would be helpful is if there was a volume property to set the volume?
My Code:

function onOpen(){
     DocumentApp.getUi()
          .createMenu("Background Music Add-On")
          .addItem("Select Music","music")
          .addItem("Set Volume","musicVol")
          .addToUi();
}

//music selection
function music(){

var musicName = DocumentApp.getUi()
     .prompt("Please select one of the music names:\n\nElevator Music,\nLeaf Rag.\nso on...")

     switch(musicName){
          case "Elevator":

               //code to play music Elevator

          break;

          //So On
     }
}

Upvotes: 0

Views: 1792

Answers (2)

Cooper
Cooper

Reputation: 64100

Playing music from a Playlist stored on your Google Drive

This script allows you to store mp3's on your Google Drive. It allows you to select which files you wish to listen too via a playlist. You must start the playlist the first time manually but then the rest of the selections play automatically. The script converts the mp3 files into dataURI's and loads them into the audio element. You can skip over the current selection and you can restart the playlist when it completes.

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 || "default.mp3";
  var folder=DriveApp.getFolderById("Music Folder Id");
  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 createMusicList() {
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName("MusicList");
  var folder=DriveApp.getFolderById("Music Folder Id");
  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=[];
  for(var i=0;i<vA.length;i++) {
    if(vA[i][4]) {
      pl.push(vA[i][1]);
    }
  }
  return pl;
}

music1.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
      label{margin:2px 10px;}
    </style>
  </head>
  <script>
    var selectionList=[];
    var gVolume=0.2;
    var index=0;
    $(function(){
       document.getElementById('msg').innerHTML="Loading Playlist";
       google.script.run
       .withSuccessHandler(function(pl){
         selectionList=pl;
         console.log(pl);
         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();
     index++;
     playnext();
   }
  </script>
  <body>
    <div id="msg"></div>
    <audio controls id="audio1" src=""></audio><br />
    <div id="status"></div>
    <div><input type="button" id="skipbtn" value="Skip" onClick="skip()" disabled /></div>
    <div id="cntrls"></div>
  </body>
</html>

Please read through the code. You need to add a music folder id and a couple of default.mp3's. The createMusicList() function reads your Music Folder and Loads them into a sheet named 'MusicList' with columns of "Item", "File Name", "File Type" ,"File Id", and PlayList. The last column is just a column of unchecked checkboxes for you to make your current playlist selection. Only one playlist for now, so you can enjoy building your own.

Here's what the dialog looks like:

enter image description here

And here's an image of my MusicList Sheet:

enter image description here

This is where you make your playlist selections.

Audio Properties and Methods

Apps Script Documentation

Latest Script Code

Upvotes: 1

Andres Duarte
Andres Duarte

Reputation: 3340

I used the answer to this question as a starting point: playing sound with google script

You would need to open a html sidebar and use an audio tag, to do this you can use the HtmlService class [1].

As a total background you can't, the sidebar must be always open to play the music. But you could still play the audio while editing the document.

To add the audio setting you can add the controls attribute to the audio tag [2]. For playing the audio automatically you can add the autoplay attibute [3].

Here is the code I implemented to achieve your goal. The code gets the selected value and uses it to change the autoplay value to true and to display the audio as well. Also, when the select element is on focus, it gets the previous selected value so later (when a new value is selected) it can be used to stop the previous audio selection and not display it anymore. For these purposes I used the onchange [4] and the onfocus [5] events.

Code.gs

var SIDEBAR_TITLE = 'Sidebar Musicbox';

function onOpen(e) {
  DocumentApp.getUi()
  .createMenu('Custom Menu')
  .addItem('Show sidebar', 'showSidebar')
  .addToUi();
}

function showSidebar() {
  var ui = HtmlService.createHtmlOutputFromFile('Sidebar')
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setTitle(SIDEBAR_TITLE);
  DocumentApp.getUi().showSidebar(ui);
}

Sidebar.html

<!DOCTYPE html>
<html>
   <head>
      <base target="_top">
   </head>
   <body>
      <div class="sidebar branding-below">
         <p>
            A little music for your enjoyment!
         </p>
         <form>
            <select id="music" onchange="playSelection();" onfocus="setOldValue(this.value);">
               <option value="0">0</option>
               <option value="1">1</option>
               <option value="2">2</option>
            </select>
         </form>
         <br> 
         <audio id="player0" controls style="display:none">
            <source src="[WEB-URL-FOR-MP3-FILE]" type="audio/mpeg">
            Your browser does not support the audio element.
         </audio>
         <audio id="player1" controls style="display:none">
            <source src="[WEB-URL-FOR-MP3-FILE]" type="audio/mpeg">
            Your browser does not support the audio element.
         </audio>
         <audio id="player2" controls style="display:none">
            <source src="[WEB-URL-FOR-MP3-FILE]" type="audio/mpeg">
            Your browser does not support the audio element.
         </audio>
         <br> 
         <div id="sidebar-status"></div>
      </div>
      <div class="sidebar bottom">
         <span class="gray branding-text">Docs Add-on Sound Demo</span>
      </div>
   </body>
   <script>
      var previousValue;

      //Function called when select onFocus     
      function setOldValue(e) {
        previousValue = e;
      }

      //Function called when selected value change     
      function playSelection() {
        //Get the value for the selected option
        var selectedValue = document.getElementById("music").value;

        //Latest and previous selection IDs 
        var player = "player" + selectedValue;
        var previousPlayer = "player" + previousValue;

        //Stop and don't display the previous selection of audio
        document.getElementById(previousPlayer).style.display = "none";
        document.getElementById(previousPlayer).autoplay = false;
        document.getElementById(previousPlayer).load();

        //Play and display the new selection and put the focus on it
        document.getElementById(player).style.display = "block";
        document.getElementById(player).autoplay = true;
        document.getElementById(player).load();
        document.getElementById(player).focus();
      }   
   </script>
</html>

[1] https://developers.google.com/apps-script/guides/html/

[2] https://www.w3schools.com/tags/att_audio_controls.asp

[3] https://www.w3schools.com/tags/att_audio_autoplay.asp

[4] https://www.w3schools.com/jsref/event_onchange.asp

[5] https://www.w3schools.com/jsref/event_onfocus.asp

Upvotes: 0

Related Questions