やりたいこと

外国語学習のためにテキストと音声を組み合わせた電子書籍を自作したいと思いました．

EPUB形式の電子書籍を自作し，CSSで音声再生ボタンを用意して，JavaScriptで音声を再生させるプログラムを用意することで実現しました．

EPUB形式の電子書籍を一からゴリゴリ作成する方法

コード

JavaScript

playMP3.js

function playAudio(audioFile, audioPlayerId, buttonId) {
    const playButton = document.getElementById(buttonId);
    const audioPlayer = document.getElementById(audioPlayerId);

    // オーディオが再生中かどうかを確認
    const isPlaying = !audioPlayer.paused && !audioPlayer.ended;

    // 再生中の場合は一時停止して先頭に戻す
    if (isPlaying) {
        audioPlayer.pause();
        audioPlayer.currentTime = 0;
        playButton.innerText = '▶';
    } else {
        // 新しい音声ファイルをセットして再生
        audioPlayer.src = audioFile;
        audioPlayer.play();
        playButton.innerText = '■';
    }
    // 再生が終了したらボタンのテキストを'▶'に変更する
    audioPlayer.addEventListener('ended', function() {
        playButton.innerText = '▶';
    });
}

CSS

再生ボタンを用意します．
場所やデザインは好みで設定します．

buttonMP3.css

button.playButton {
    font-size: 1.8em;
    margin: 0 0 10px 40px;
    width: 50px;
    height: 50px;

    color: white;
    background-color: grey;

    border: none;
    border-radius: 4px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

XHTML

<head>内でCSSとJavaScriptファイルを読み込みます．
本文でJavaScriptで記述した関数を呼び出します．

コード

chapter-01.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>

<html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">

<head>
  <meta charset="UTF-8" />
  <title>タイトル</title>

  <link rel="stylesheet" type="text/css" href="../style/buttonMP3.css" />
  <script type="text/javascript" src="../js/playMP3.js"></script>

</head>

<body>
  1つ目の音声です．
  <button id="playButton01" class="playButton"
    onclick="playAudio('../audio/sample01.mp3', 'audioPlayer01', 'playButton01')">▶</button>
  <audio class="audioPlayer" id="audioPlayer01" src=""></audio>

  2つ目の音声です．
  <button id="playButton02" class="playButton"
    onclick="playAudio('../audio/sample02.mp3', 'audioPlayer02', 'playButton02')">▶</button>
  <audio class="audioPlayer" id="audioPlayer02" src=""></audio>

</body>
</html>

OPFファイル

作成したJavaScript, CSS, 音声ファイルを全て忘れずにOPFファイルに記述します．

コード

standard.opf

<?xml version="1.0" encoding="UTF-8"?>
<package
    xmlns="http://www.idpf.org/2007/opf"
    version="3.0"
    xml:lang="ja"
    unique-identifier="unique-id"
    prefix="ebpaj: http://www.ebpaj.jp/"
>

    <metadata xmlns:dc="http://purl.org/dc/elements/1.1/">

        <dc:title id="title">タイトル</dc:title>
        <dc:creator id="creator01" xml:lang="ja">著者</dc:creator>
        <dc:publisher id="publisher" xml:lang="ja">出版社</dc:publisher>
        <dc:language>ja</dc:language>
        <dc:identifier id="unique-id">urn:uuid:XXXXXXXXXXXXXXXX</dc:identifier>

        <!-- accessibility metadata -->
        <meta property="schema:accessMode">textual</meta>
        <meta property="schema:accessMode">visual</meta>
        <meta property="schema:accessibilityFeature">alternativeText</meta>
        <meta property="schema:accessibilityHazard">none</meta>
        <meta property="schema:accessModeSufficient">textual,visual</meta>
        <meta property="schema:accessModeSufficient">textual</meta>

    </metadata>

    <manifest>
        <!-- navigation -->
        <item media-type="application/xhtml+xml" id="toc" href="navigation-document.xhtml"
            properties="nav" />

        <!-- style -->
        <item media-type="text/css" id="voc-style" href="style/buttonMP3.css" />

        <!-- audio -->
        <item media-type="audio/mpeg" href="audio/sample01.mp3" id="ad01" />
        <item media-type="audio/mpeg" href="audio/sample02.mp3" id="ad02" />

        <!-- xhtml -->
        <item media-type="application/xhtml+xml" id="table-of-content" href="xhtml/toc.xhtml" />
        <item media-type="application/xhtml+xml" id="chapter-01" href="xhtml/chapter-01.xhtml" />

        <!-- javascript -->
        <item id="js1" href="js/playMP3.js" media-type="text/javascript" />

    </manifest>

    <spine page-progression-direction="ltr">
        <itemref linear="yes" idref="table-of-content" />
        <itemref linear="yes" idref="chapter-01" />
    </spine>

</package>

完成

zip圧縮してEPUB形式にしてからApple Booksで開いた結果です．

再生前

再生中

通常のWebページ上に実装する場合と同様に電子書籍で音声再生機能が実現できました．