play single contribution

contents.js

@@ -50,6 +50,31 @@ function createSection(contribution) {
 	section.querySelector(".author").innerHTML = contribution.author;
 	section.querySelector(".description").innerHTML = contribution.description;
 	section.querySelector(".content").innerHTML = contribution.content_html;
+
+	if ((contribution.audio && contribution.audio.length == 1) || contribution.original) {
+		let audio = new Audio(
+			`https://hub.xpub.nl/soupboat/SI18/03/${contribution.folder}/${
+				contribution.original || contribution.audio[0]
+			}`
+		);
+		audio.addEventListener("canplaythrough", (event) => {
+			/* the audio is now playable; play it if permissions allow */
+			section.querySelector(".filename").innerHTML = `${~~(audio.duration / 60)}:${~~(
+				audio.duration % 60
+			)}`;
+			let player = section.querySelector(".player");
+			player.innerHTML = "Play";
+			player.addEventListener("click", () => {
+				if (audio.paused) {
+					audio.play();
+					player.innerHTML = "Pause";
+				} else {
+					audio.pause();
+					player.innerHTML = "Play";
+				}
+			});
+		});
+	} else section.querySelector(".audio").remove();
 	return section;
 }
 

index.html

@@ -317,7 +317,7 @@
 				</div>
 				<!-- --------------------- -->
 			</div>
-			<div class="libretto" contenteditable="true">
+			<div class="libretto">
 				<header class="cover">
 					<div class="release">
 						10.05.2022 <br />
@@ -367,6 +367,10 @@
 					</div>
 					<h2 class="title">Overture Atlas</h2>
 					<div class="description">description</div>
+					<div class="audio">
+						<button class="player">Loading</button>
+						<span class="filename"></span>
+					</div>
 					<div class="content"></div>
 				</section>
 			</div>

style.css

@@ -10,18 +10,17 @@
 }
 
 :root {
-    --text:#111;
-    --wireframe:#111;
-    --background:#FF6347;
+	--text: #111;
+	--wireframe: #111;
+	--background: #ff6347;
 }
 
-*{
+* {
 	box-sizing: border-box;
 }
 
-
-
-body, html{
+body,
+html {
 	margin: 0;
 	padding: 0;
 	background-color: var(--background);
@@ -30,6 +29,7 @@ body, html{
 	font-size: 21px;
 	line-height: 1.6;
 
+	overflow: hidden;
 }
 
 .container {
@@ -52,8 +52,6 @@ body, html{
 	border-right: solid 1px var(--wireframe);
 }
 
-
-
 .info {
 	display: flex;
 	justify-content: space-around;
@@ -63,21 +61,23 @@ body, html{
 	border-top: solid 1px var(--wireframe);
 }
 
-.libretto{  
+.libretto {
 	overflow-y: scroll;
 	scroll-behavior: smooth;
 }
 
-
 .libretto > * {
 	border-bottom: solid 1px var(--wireframe);
 }
 
+.contribution:last-of-type {
+	border-bottom: none;
+}
+
 .atlas svg {
 	padding: 32px;
 	width: 100%;
 	overflow: visible;
-
 }
 
 .atlas svg #live-path {
@@ -88,23 +88,21 @@ body, html{
 }
 
 @keyframes dash {
-    to{
+	to {
 		stroke-dashoffset: 0;
 	}
 }
 
-
-path[data-link]{
+path[data-link] {
 	pointer-events: all;
-    pointer-events:bounding-box;
+	pointer-events: bounding-box;
 }
 
-
-.moment{
+.moment {
 	text-transform: uppercase;
 }
 
-.cover{
+.cover {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -121,7 +119,6 @@ path[data-link]{
 .cover .title {
 	font-size: 64px;
 	margin: 64px 0;
-  
 }
 
 .cover .description {
@@ -146,12 +143,10 @@ dd {
 	display: none;
 }
 
-
 #reference {
 	display: none;
 }
 
-
 .contribution {
 	padding: 16px;
 	padding-bottom: 64px;
@@ -170,15 +165,28 @@ dd {
 	text-transform: uppercase;
 }
 
-ul, ol {
+.contribution .audio {
+	margin-bottom: 32px;
+}
+
+.contribution .player {
+	border: 1px solid currentColor;
+	outline: none;
+	background: none;
+	padding: 4px 8px;
+	cursor: pointer;
+}
+
+ul,
+ol {
 	margin: 16px 0;
 }
 
 .contribution .description {
 	font-style: italic;
 
-    padding-bottom: 32px;
-    }
+	padding-bottom: 8px;
+}
 
 .contribution .content h3,
 .contribution .content h2 {
@@ -196,7 +204,6 @@ ul, ol {
 	object-fit: contain;
 }
 
-
 .content {
 	white-space: pre-line;
 }
@@ -222,22 +229,20 @@ ul, ol {
 	font-size: 1rem;
 }
 
-#btn-print:hover{
+#btn-print:hover {
 	cursor: pointer;
 }
 
-a{
+a {
 	position: relative;
 	color: currentColor;
 	pointer-events: all;
-
 }
 
-a:hover{
+a:hover {
 	color: white;
 }
 
-
 @namespace svg url(http://www.w3.org/2000/svg);
 /* Necessary to select only SVG <a> elements, and not also HTML's.
    See warning below */
@@ -253,7 +258,7 @@ svg|g {
 	pointer-events: all;
 }
 
-@media (max-width: 991.98px){
+@media (max-width: 991.98px) {
 	.container {
 		height: auto;
 		width: 100%;