EcutDavid/medium-voice-notes-p1-demo.html

## medium-voice-notes-p1-demo.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Voice Notes</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <style>
      body, html {
        margin: 0;
        height: 100%;
      }

      #buttons {
        padding: 50px 0;
        height: calc(100% - 54px);
        box-sizing: border-box;
        overflow: auto;
      }

      button {
        width: calc(100% - 60px);
        margin: 10px 30px;
      }

      audio {
        width: 100%;
        height: 54px;
      }
    </style>
  </head>
  <body>
    <div id="buttons"></div>
    <audio src="" controls></audio>
    <script>
      const manifestUrl = 'https://polly-voice-notes.s3-ap-southeast-2.amazonaws.com/manifest.json';
      const bucketUrl = 'https://polly-voice-notes.s3-ap-southeast-2.amazonaws.com';
      const audio = document.querySelector("audio");
      const container = document.querySelector("#buttons");

      function filenameToTitle(key) {
        const lastDotIndex = key.lastIndexOf('.');
        return key.slice(0, lastDotIndex).replace(/_/g, ' ');
      }

      fetch(manifestUrl)
        .then(d => d.json())
        .then(ret => {
          const notes = ret.notes;
          notes.forEach(d => {
            const button = document.createElement("button");
            button.innerText = filenameToTitle(d.name);
            button.className = "btn btn-outline-primary";
            const url = `${bucketUrl}/${d.key}`;
            button.addEventListener("click", () => {
              audio.src = url;
              audio.play();
            });
            container.append(button);
          });
        });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Voice Notes</title>
	<link
	rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
	/>
	<style>
	body, html {
	margin: 0;
	height: 100%;
	}

	#buttons {
	padding: 50px 0;
	height: calc(100% - 54px);
	box-sizing: border-box;
	overflow: auto;
	}

	button {
	width: calc(100% - 60px);
	margin: 10px 30px;
	}

	audio {
	width: 100%;
	height: 54px;
	}
	</style>
	</head>
	<body>
	<div id="buttons"></div>
	<audio src="" controls></audio>
	<script>
	const manifestUrl = 'https://polly-voice-notes.s3-ap-southeast-2.amazonaws.com/manifest.json';
	const bucketUrl = 'https://polly-voice-notes.s3-ap-southeast-2.amazonaws.com';
	const audio = document.querySelector("audio");
	const container = document.querySelector("#buttons");

	function filenameToTitle(key) {
	const lastDotIndex = key.lastIndexOf('.');
	return key.slice(0, lastDotIndex).replace(/_/g, ' ');
	}

	fetch(manifestUrl)
	.then(d => d.json())
	.then(ret => {
	const notes = ret.notes;
	notes.forEach(d => {
	const button = document.createElement("button");
	button.innerText = filenameToTitle(d.name);
	button.className = "btn btn-outline-primary";
	const url = `${bucketUrl}/${d.key}`;
	button.addEventListener("click", () => {
	audio.src = url;
	audio.play();
	});
	container.append(button);
	});
	});
	</script>
	</body>
	</html>