Maru ni mitsubane
丸に三つ羽 (Maru ni Mitsu Hane)
Three Dove Feathers Within a Circle

Part II — Understanding the Interview Template

This section continues from Part I and explains the interview template line by line.

Complete interview template

Follow everything below this notepad. This is the raw guide. Follow it step by step. 

How to create the QR Codes
This guide explains how to create an audio archive entry that opens directly into a recording when scanned. If the recording cannot be played, the same page automatically provides download links, backup links, and other archival material.
The finished result looks like this:
QR Code
     ↓
Website
     ↓
Recording begins (or the user presses Play)
     ↓
If the recording cannot be reached:
• Download recording
• Dropbox mirror
• Google Drive mirror (optional)
• Transcript (optional)

The QR code should never point directly to the audio file. It should always point to the webpage. The webpage is responsible for loading the recording and displaying backup options if anything goes wrong.
What you need
Before starting, prepare the following:
One interview recording (.m4a)
One HTML file (index.html)
One photograph (optional)
Transcript (optional)
Internet connection
A web host or HTML hosting service
A pc. obviously.

Step 1 — Create the archive folder
Create one folder for every interview.
Example:
INT-001/

Everything related to that interview stays inside this folder.
Example:
INT-001/
├── index.html
├── INT-001.m4a
├── mitsunohane.jpg
├── transcript.pdf (optional, if you have the patience to build a transcript.)

Nothing should be placed somewhere else unless you know exactly what you're doing.

Step 2 — Name your files
Use consistent names.
Example:
INT-001.m4a
INT-002.m4a
INT-003.m4a

Likewise for transcripts.
INT-001.pdf
INT-002.pdf

Keeping the filenames identical to the archival number makes everything much easier to maintain and keep track of.


Step 3 — Create the index.html file
This page is what the QR code actually opens.
The audio recording, photograph, interview information, and backup links are all controlled from this one file.
Open Notepad.
Copy the HTML template exactly as provided in this manual. Do not edit anything yet.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{PERSON_NAME}} Interview</title>
<!-- Noto Sans JP -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
*{
box-sizing:border-box;
}
body{
margin:0;
font-family:"Noto Sans JP",sans-serif;
background:#f7f7f7;
color:#222;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}
.container{
width:min(650px,92%);
text-align:center;
}
.quote{
font-style:italic;
opacity:.65;
margin:2rem 0;
line-height:1.8;
}
h1{
margin:.2rem 0;
font-weight:600;
font-size:2rem;
}
.subtitle{
opacity:.75;
margin-bottom:2rem;
}
audio{
width:100%;
}
#fallback{
display:none;
margin-top:2rem;
padding:1.5rem;
border:1px solid #ddd;
border-radius:12px;
background:white;
}
.links{
margin-top:1rem;
display:flex;
flex-direction:column;
gap:.7rem;
}
.links a{
color:#0066cc;
text-decoration:none;
}
.links a:hover{
text-decoration:underline;
}
footer{
margin-top:3rem;
opacity:.7;
font-size:.9rem;
}
.object-fit:contain;{
width:4.33in;
height:4.33in;
object-fit:cover;
display:block;
margin:0 auto 2rem auto;
border-radius:12px; /* Optional */
}
</style>
</head>
<body>
<div class="container">
<img src="mitsunohane.jpg" alt="Maru ni mitsubane" class="portrait">
<div class="quote">
    丸に三つ羽 (Maru ni Mitsu Hane) <br>
Three Dove Feathers Within a Circle 
</div>

<h1>{{PERSON_NAME}}</h1>

<div class="subtitle">
    Interview ID: INT-001<br>
    Recorded: July 10 2026
</div>

<audio
    id="player"
    controls
    autoplay
    preload="metadata">

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

    Your browser does not support audio playback.

</audio>

<div id="fallback">

    <h2>Unable to load the recording.</h2>

    <p>
        The primary recording could not be reached.
        Please try one of the options below.
    </p>

    <div class="links">

        <a href="INT-001.m4a">
            Download MP3
        </a>

        <a href="https://www.dropbox.com/scl/fi/o70w2e5jm79k10tzha63t/INT-001.m4a?rlkey=88q0z65mk0h4h2yghlrz4mcni&st=pdsws7az&dl=0">
            Dropbox Mirror
        </a>



    </div>

</div>

<footer>

    "Every Generation Rises to the Next"

</footer>

</div>
<script>
const player = document.getElementById("player");
const fallback = document.getElementById("fallback");
// If the audio cannot be loaded,
// show the fallback section.
player.addEventListener("error", () => {
fallback.style.display = "block";
});
// Some browsers fire the error on the source instead.
const source = player.querySelector("source");
source.addEventListener("error", () => {
fallback.style.display = "block";
});
</script>
</body>
</html>



Once the entire template has been pasted into Notepad, save the file using the following settings:
File name:
index.html

Save as type:
All Files (*.*)

Encoding:
UTF-8
The filename must be index.html.
Do not save it as:
index.html.txt
or
Index.html

Most web servers automatically look for a file named index.html whenever someone visits a folder. This is why the QR code can point to:
https://archive.example.com/INT-001/
instead of
https://archive.example.com/INT-001/index.html

The browser automatically opens index.html behind the scenes.
After saving the file, move it into the interview folder.
Your folder should now look like this:
INT-001/
├── index.html

The HTML file still doesn't contain the interview yet. It is only the framework.
The next steps customize it.


Step 4 — Add the recording
Copy the interview recording into the same folder.
Example:
INT-001/
├── index.html
├── INT-001.m4a

Open index.html in Notepad again.
Locate this section:
<source
    src="INT-001.m4a"
    type="audio/mp4">

The value inside src="" is simply the filename of the recording.
If your recording is named:
Grandfather Interview.m4a

then change it to:
src="Grandfather Interview.m4a"

If you rename the recording later, remember to update this line so that the filename inside the HTML matches the filename in the folder exactly.
The HTML looks only inside its own folder. It does not search your computer.

Step 5 — Add the family crest
Place the crest inside the same folder.
Example:
INT-001/
├── index.html
├── INT-001.m4a
└── mitsunohane.jpg

Locate this line:
<img src="mitsunohane.jpg">

Replace mitsunohane.jpg with the actual filename if it is different.
For example:
<img src="grandmother.jpg">

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


Step 6 — Edit the interview information
The HTML template already contains placeholders.
Replace each one with the interview's information.
Example:
{{PERSON_NAME}}

becomes
José dela Cruz

Replace:
Person's name
Interview ID
Recording date
Opening quotation
Closing quotation
Only replace the text itself. Leave the surrounding HTML unchanged.


Step 7 — Add backup links
The template already contains placeholders for backup links.
Each href="" points somewhere.
For example:
<a href="INT-001.m4a">
Download Recording
</a>

points to the recording inside the same folder.
The Dropbox link:
<a href="https://...">
Dropbox Mirror
</a>

should be replaced with the Dropbox sharing link for that interview.
If you're also using Google Drive, duplicate that same line and change only two things:
the visible text ("Google Drive Mirror")
the link inside href=""
The transcript works the same way.
If the transcript is inside the interview folder:
<a href="transcript.pdf">
Read Transcript
</a>

If it is hosted online instead, replace transcript.pdf with the online address.


Before publishing
Your completed folder should resemble this:
INT-001/
├── index.html
├── INT-001.m4a
├── mitsunohane.jpg
└── transcript.pdf

Everything that belongs to Interview 001 stays inside this folder.
When the folder is uploaded to a web host, index.html automatically finds the recording, photograph, and transcript because they are all stored together.

After copying the template

  1. Save the file as index.html using All Files (*.*) and UTF-8.
  2. Create an interview folder such as INT-001.
  3. Move index.html into that folder.
  4. Place the recording (INT-001.m4a), crest (mitsunohane.jpg) and optional transcript into the same folder.
  5. Edit only the placeholders: person's name, interview ID, recording date, filenames and backup links.
  6. Upload the entire folder to your web host. The QR code should point to the folder URL, not directly to the audio file.

Reference

Print the archive reference (for example INT-001) beneath every QR code so the interview can still be found manually if the QR code ever fails.

← Part I   |   Continue to Frequently Asked Questions →


Navigation

Part I — Building an Archive Entry

Part II — Understanding the HTML Template

Part III — Frequently Asked Questions

Part IV — Troubleshooting

Part V — Maintenance

Currently Reading:
Part II - Understanding the HTML Template