How can I play a sound as part of a triggered function

Question

I am trying to build a type of alarm clock with a Google sheet. Can anyone think of a way I can play a sound on a trigger?

Answer 1

Until the release of IFRAME sandboxes in December 2014 (and the subsequent months of bug fixes ;) it was not possible to support HTML5 audio tags through Google Apps Script's Caja-sanitized HTML. See issue 2196.

Here's a simple example that embeds a music player into a document sidebar.

Code.gs

var SIDEBAR_TITLE = 'Sidebar Musicbox';

/**
 * Adds a custom menu with items to show the sidebar and dialog.
 *
 * @param {Object} e The event parameter for a simple onOpen trigger.
 */
function onOpen(e) {
  DocumentApp.getUi()
      .createAddonMenu()
      .addItem('Show sidebar', 'showSidebar')
      .addToUi();
}

/**
 * Runs when the add-on is installed; calls onOpen() to ensure menu creation and
 * any other initializion work is done immediately.
 *
 * @param {Object} e The event parameter for a simple onInstall trigger.
 */
function onInstall(e) {
  onOpen(e);
}

/**
 * Opens a sidebar. The sidebar structure is described in the Sidebar.html
 * project file.
 */
function showSidebar() {
  var ui = HtmlService.createTemplateFromFile('Sidebar')
      .evaluate()
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setTitle(SIDEBAR_TITLE);
  DocumentApp.getUi().showSidebar(ui);
}

Sidebar.html

<!-- Use a templated HTML printing scriptlet to import common stylesheet -->
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>

<div class="sidebar branding-below">
    <p>
    A little music for your enjoyment!
    </p>
    <audio id="player" controls>
      <source src="http://ukulelehunt.com/wp-content/uploads/2008/11/alohadechocobo.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
    <div id="sidebar-status"></div>
</div>

<div class="sidebar bottom">
  <span class="gray branding-text">Docs Add-on Sound Demo</span>
</div>

Stylesheet.html

<!-- This CSS package applies Google styling; it should always be included. -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">

<style>
#player {
 width: 95%;
}
</style>