Commit 9fc40208 authored by Kaushal Modi's avatar Kaushal Modi

Basic example with audio player

Uses https://wavesurfer-js.org/.
parent 8156a8da
......@@ -11,6 +11,14 @@
#+macro: bad 🚫
* Miscellaneous :@miscellaneous:
** DONE Audio widget 1
CLOSED: [2018-10-08 Mon 16:11]
:PROPERTIES:
:EXPORT_FILE_NAME: audio-widget-1
:EXPORT_HUGO_AUDIO: /audio/bachfugue.mp3
:EXPORT_HUGO_LAYOUT: audio
:END:
[[https://ccrma.stanford.edu/~jos/pasp/Sound_Examples.html][Audio credit]]
** DONE Accessing page param
CLOSED: [2018-09-25 Tue 16:23]
:PROPERTIES:
......
+++
title = "Audio widget 1"
audio = "/audio/bachfugue.mp3"
author = ["Kaushal Modi"]
date = 2018-10-08T16:11:00-04:00
layout = "audio"
categories = ["miscellaneous"]
draft = false
creator = "Emacs 27.0.50 (Org mode 9.1.14 + ox-hugo)"
+++
[Audio credit](https://ccrma.stanford.edu/~jos/pasp/Sound%5FExamples.html)
{{ define "head" }}
<!-- Chroma Github theme CSS -->
<link rel="stylesheet" href="{{ "css/github_chroma.css" | relURL }}" type="text/css" />
{{ end }}
{{ define "main" }}
<div class="post">
<h1 class="post-title">{{ .Title }}</h1>
<!-- Taxonomy debug -->
{{ $page := . }}
{{ with .Site.Taxonomies }}
{{ range $key,$_ := . }}
{{ with $page.Param $key }}
{{ $val := . }}
<p>
{{ printf `<span style="font-variant: small-caps;">%s</span>:` $key | safeHTML }}
{{ with $.Site.GetPage "taxonomyTerm" $key }}
{{ $taxonomy_page := . }}
{{ range $val }}
<a href="{{ printf "%s%s" $taxonomy_page.URL (. | urlize) }}">{{ . }}</a>
{{ end }}
{{ end }}
</p>
{{ end }}
{{ end }}
{{ end }}
<p>
{{ if .Params.draft }}
<hr />
<div style="text-align: center;"><h2>This is a Draft</h2></div>
<hr />
{{ end }}
</p>
<hr />
<h3>Description/Summary</h3>
{{ with .Description }}
{{ . | markdownify }}
{{ else }}
{{ partial "summary_minus_toc.html" . | safeHTML }}
{{ end }}
<hr />
{{ partial "header_image.html" . }}
<h3>Content</h3>
{{ .Content }}
{{ with .Params.audio }}
<!-- https://www.w3schools.com/jsref/met_audio_pause.asp -->
<audio id="myAudio">
<source src="{{ . }}" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button>
<script>
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
</script>
{{ end }}
</div>
{{ end }}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment