Audio Interview Setup Guide

Purpose

This guide teaches how to build one interview entry from nothing. Every interview lives inside its own folder. The QR code always points to the webpage (index.html), not directly to the recording.

QR Code
   ↓
Website (index.html)
   ↓
Recording
   ↓
Fallback links (Dropbox / Google Drive / Transcript)

Folder structure

INT-001/
├── index.html
├── INT-001.m4a
├── mitsunohane.jpg
└── transcript.pdf (optional)

Keep every interview self-contained. The HTML looks for files inside its own folder.

Create index.html

Open Notepad and paste the interview HTML template. Save using:

Filename: index.html
Save as type: All Files (*.*)
Encoding: UTF-8

If Windows saves index.html.txt, enable File name extensions in File Explorer and rename it to index.html.

Add the recording

<source src="INT-001.m4a" type="audio/mp4">

The filename inside src="" must exactly match the recording in the folder.

Add the crest

<img src="mitsunohane.jpg" class="portrait">

The image filename must match exactly.

Backup links

<a href="INT-001.m4a">Download Recording</a>
<a href="DROPBOX_LINK">Dropbox Mirror</a>
<a href="GOOGLE_DRIVE_LINK">Google Drive Mirror</a>
<a href="transcript.pdf">Read Transcript</a>

Replace each href with the correct location.

Publish

Upload the entire interview folder to a static web host. Do not upload only index.html.

INT-001/
├── index.html
├── INT-001.m4a
├── mitsunohane.jpg
└── transcript.pdf

After publishing, copy the webpage URL and generate the QR code from that URL.