OpenAI/labyricorn-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add optional narration players
Deploy production / deploy (push) Successful in 5s
Details

Browse Source
This commit is contained in:
Labyricorn
2026-08-12 11:45:40 -07:00
parent ef0b82a9ea
commit 797be4d878
5 changed files with 208 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/base.html
+2 -1
View File
@@ -9,9 +9,10 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500&family=Playfair+Display:ital,wght@0,600;0,700;1,500;1,600&display=swap" rel="stylesheet">
<link rel="icon" href="{{ '/static/favicon.svg'|url }}" type="image/svg+xml">
<link rel="stylesheet" href="{{ '/static/style.css'|url }}?v=12">
<link rel="stylesheet" href="{{ '/static/style.css'|url }}?v=13">
<script src="{{ '/static/tags.js'|url }}?v=1" defer></script>
<script src="{{ '/static/activity.js'|url }}?v=1" defer></script>
<script src="{{ '/static/narration.js'|url }}?v=1" defer></script>
</head>
<body>
<header class="site-header">
templates/entry.html
+31 -24
View File
@@ -1,5 +1,6 @@
{% extends "base.html" %}
{% from "macros/tag-links.html" import tag_links with context %}
{% from "macros/narration-player.html" import narration_player with context %}
{% block body %}
{% if this.parent._id == 'blog' %}
<article class="blog-post-layout shell">
@@ -9,25 +10,28 @@
<p class="dek">{{ this.summary }}</p>
</header>
<aside class="post-info" aria-label="Post information">
<p class="post-info-title">Post information</p>
<dl>
<div class="post-info-row">
<dt>Author</dt>
<dd>{{ this.author }}</dd>
</div>
<div class="post-info-row">
<dt>Published</dt>
<dd><time datetime="{{ this.date }}">{{ this.date|dateformat('long') }}</time></dd>
</div>
<div class="post-info-row">
<dt>Tags</dt>
<dd class="post-tags">
{{ tag_links(this.tags) }}
</dd>
</div>
</dl>
</aside>
<div class="post-meta">
<aside class="post-info" aria-label="Post information">
<p class="post-info-title">Post information</p>
<dl>
<div class="post-info-row">
<dt>Author</dt>
<dd>{{ this.author }}</dd>
</div>
<div class="post-info-row">
<dt>Published</dt>
<dd><time datetime="{{ this.date }}">{{ this.date|dateformat('long') }}</time></dd>
</div>
<div class="post-info-row">
<dt>Tags</dt>
<dd class="post-tags">
{{ tag_links(this.tags) }}
</dd>
</div>
</dl>
</aside>
{{ narration_player(this) }}
</div>
<div class="blog-entry-body prose">
{{ this.body }}
@@ -44,9 +48,10 @@
<p class="dek">{{ this.summary }}</p>
</header>
<aside class="post-info article-info" aria-label="Article information">
<p class="post-info-title">Article information</p>
<dl>
<div class="post-meta">
<aside class="post-info article-info" aria-label="Article information">
<p class="post-info-title">Article information</p>
<dl>
{% if this.author %}
<div class="post-info-row">
<dt>Author</dt>
@@ -91,8 +96,10 @@
</dd>
</div>
{% endif %}
</dl>
</aside>
</dl>
</aside>
{{ narration_player(this) }}
</div>
<div class="article-entry-body prose">
{{ this.body }}
templates/macros/narration-player.html
+37
View File
@@ -0,0 +1,37 @@
{% macro narration_player(record) %}
{% set narration = record.attachments.get('narration.mp3') %}
{% if narration %}
<section class="narration-player" data-narration-player aria-label="Narrated version">
<h2 class="narration-title">Narrated version</h2>
<audio class="narration-audio" controls preload="metadata" aria-label="Narration of {{ record.title }}">
<source src="{{ narration|url }}" type="audio/mpeg">
Your browser does not support audio playback. <a href="{{ narration|url }}">Download the narration</a>.
</audio>
<div class="narration-controls" data-narration-controls hidden>
<button class="narration-toggle" type="button" data-narration-toggle aria-label="Play narration">
<span aria-hidden="true" data-narration-toggle-icon>▶</span>
</button>
<div class="narration-timeline">
<input type="range" min="0" max="0" value="0" step="0.1" data-narration-progress aria-label="Seek through narration" aria-valuetext="0:00 of unknown duration">
<output class="narration-time" aria-live="off">
<span data-narration-current>0:00</span> / <span data-narration-duration>–:––</span>
</output>
</div>
</div>
<div class="narration-details">
<p>Narrated by the author</p>
<label>
<span>Playback speed</span>
<select class="narration-speed" data-narration-speed aria-label="Playback speed">
<option value="0.75">0.75×</option>
<option value="1" selected>1×</option>
<option value="1.25">1.25×</option>
<option value="1.5">1.5×</option>
<option value="1.75">1.75×</option>
<option value="2">2×</option>
</select>
</label>
</div>
</section>
{% endif %}
{% endmacro %}