当前位置：文江博客话题详情

通过 JavaScript 播放 iPad EPUB 音频

发布于 2024-11-04 10:08:15 字数 55 浏览 3 评论 0原文

我想在 iPad 上播放 EPUB 文件中的音频。音频应在单击图像时播放和暂停。形象也应该改变。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧时光的容颜 2024-11-11 10:08:16

我们使用以下保存为“audio-player.js”的 JS 代码。

var channel_max = 12;   // number of channels
audiochannels = new Array();
for (a=0;a<channel_max;a++) { // prepare the channels
    audiochannels[a] = new Array();
    audiochannels[a]['channel'] = new Audio(); // create a new audio object
    audiochannels[a]['finished'] = -1; // expected end time for this channel
}
function play_multi_sound(s) {

    for (a=0;a<audiochannels.length;a++) {
        thistime = new Date();
        if (audiochannels[a]['finished'] < thistime.getTime()) {            // is this channel finished?
            audiochannels[a]['finished'] = thistime.getTime() + document.getElementById(s).duration*1000;
            audiochannels[a]['channel'].src = document.getElementById(s).src;
            audiochannels[a]['channel'].load();
            audiochannels[a]['channel'].play();
            break;
        }
    }
}

使用方法如下：

添加音频播放器 js 文件：

<script src="../js/audio-player.js" type="text/javascript"/>

在正文中添加音频标签：

<audio id="storyAudio1" preload="auto" src="../audio/page_1.caf"/>

添加带有 onClick 事件的图像：

<img src="../images/play-button.png" class="audioButton"
onclick="play_multi_sound('storyAudio1')"/>

如果您想查看真实示例，请下载“故事轮” (http:// www.storywheelapp.com/)（免费），创建一个故事，然后通过电子邮件给自己发送刚刚创建的故事的 ePub 版本。

我们很快就会发布“自动播放”版本，这对我们来说应该会更好一些。让我知道你的想法。

安迪

We use the following JS code that we saved as 'audio-player.js'.

var channel_max = 12;   // number of channels
audiochannels = new Array();
for (a=0;a<channel_max;a++) { // prepare the channels
    audiochannels[a] = new Array();
    audiochannels[a]['channel'] = new Audio(); // create a new audio object
    audiochannels[a]['finished'] = -1; // expected end time for this channel
}
function play_multi_sound(s) {

    for (a=0;a<audiochannels.length;a++) {
        thistime = new Date();
        if (audiochannels[a]['finished'] < thistime.getTime()) {            // is this channel finished?
            audiochannels[a]['finished'] = thistime.getTime() + document.getElementById(s).duration*1000;
            audiochannels[a]['channel'].src = document.getElementById(s).src;
            audiochannels[a]['channel'].load();
            audiochannels[a]['channel'].play();
            break;
        }
    }
}

Here is how you can use it:

Add the audio player js file:

<script src="../js/audio-player.js" type="text/javascript"/>

Add an audio tag to the body:

<audio id="storyAudio1" preload="auto" src="../audio/page_1.caf"/>

Add an image with an onClick event:

<img src="../images/play-button.png" class="audioButton"
onclick="play_multi_sound('storyAudio1')"/>

If you want to see a real example, download "Story Wheel" (http://www.storywheelapp.com/) (free), create a story, and then email yourself an ePub version of the story you just created.

We will be releasing an "auto play" version soon, which should work a bit better for us. Let me know what you think.

Andy

回复收藏 0 原文