Add playback range in audio element

Author: xarantolus

assets/js/song.js

@@ -59,11 +59,6 @@ function songPage() {
     if (audioElement.duration == NaN) {
         audioElement.src = document.getElementsByClassName("source")[0].src;
     }
-    
-    var start = document.getElementsByName("audio-start");
-    if (start.length > 0 && start[0].value > 0) {
-        audioElement.currentTime = start[0].value
-    }
 
     // initialize mediaSession metadata
     if ('mediaSession' in navigator) {
@@ -75,7 +70,7 @@ function songPage() {
             artwork.push({ src: coverImage.src + "?size=small", sizes: "120x120" });
             artwork.push({ src: coverImage.src, sizes: coverImage.dataset.size + "x" + coverImage.dataset.size });
         }
-        
+
         navigator.mediaSession.metadata = new MediaMetadata({
             title: document.getElementById("song-title").value,
             artist: document.getElementById("song-artist").value,

assets/js/song.min.js

@@ -2,6 +2,7 @@ package music
 
 import (
 	"fmt"
+	"math"
 	"path/filepath"
 	"strings"
 	"time"
@@ -128,6 +129,29 @@ type AudioSettings struct {
 	End float64 `json:"end"`
 }
 
+// TimeRange returns the playback range for HTML media elements
+// See https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery#specifying_playback_range
+func (e *Entry) PlaybackRange() string {
+	// if end time == duration
+	if e.AudioSettings.End <= 0 || math.Abs(e.AudioSettings.End-e.MusicData.Duration) < 0.001 {
+		// if we also have no start time, then neither was set -- return nothing
+		if e.AudioSettings.Start <= 0.001 {
+			return ""
+		}
+
+		// Only the start time is set
+		return fmt.Sprintf("#t=%f", e.AudioSettings.Start)
+	}
+
+	if e.AudioSettings.Start <= 0.001 {
+		// Only the end time is set
+		return fmt.Sprintf("#t=0,%f", e.AudioSettings.End)
+	}
+
+	// both are set
+	return fmt.Sprintf("#t=%f,%f", e.AudioSettings.Start, e.AudioSettings.End)
+}
+
 type MusicData struct {
 	Title  string `json:"title"`
 	Artist string `json:"artist"`

store/music/entry.go

@@ -132,8 +132,8 @@
                 <div class="field">
                     <div class="control">
                         <audio preload="none" class="audio-controls" controls="">
-                            <source src="/song/{{.ID}}/audio">
-                            <source src="/song/{{.ID}}/mp3" type="audio/mpeg">
+                            <source src="/song/{{.ID}}/audio{{.PlaybackRange}}">
+                            <source src="/song/{{.ID}}/mp3{{.PlaybackRange}}" type="audio/mpeg">
                             It seems like your browser doesn't support playing audio.
                         </audio>
                     </div>