Back

If your email is not recognized and you believe it should be, please contact us.

  • You must be logged in to reply to this topic.Login

Audio in Fixed-Layout EPUB

Tagged: , , , , , ,

Return to Member Forum

  • Author
    Posts
    • August 30, 2013 at 11:13 am #65118
      Shawn Girsberger
      Member

      So. I have my fixed-layout EPUB set up properly, fonts embedded, 15 tests and passed all preflights, and I’ve edited my audio tracks. The audio files are called out properly in the HTML files. This is a prototype destined for iBooks first, and may be redone for other tablet devices later.

      Here’s the problem. I have my audio files positioned at the bottom of the right-hand page on each spread. The controller is visible on every recto. When I tap the Play arrow on the controller on page 1 (the half title page), the audio plays. When I tap the Play arrow on the controller on any other page, there is silence. This is driving me nuts, as I suspect it’s some small thing I’m just not getting.

      Here’s my CSS for the div that positions the controller:

      div.audio-frame {
      position:absolute;
      height: 60px;
      width: 60px;
      left: 58px;
      top: 654px;
      }

      Here’s the HTML for one of the pages with image, text, and the audio file. Every page is set up like this. Only the even-numbered pages have the additional audio element:

      <?xml version=”1.0″ encoding=”UTF-8″ standalone=”no”?>
      <html xmlns=”https://www.w3.org/1999/xhtml”&gt;
      <head>
      <meta name=”viewport” content=”width=512,height=768″></meta>
      <title>peter_pajamas_10</title>
      <link href=”css/peter_paja_idstyles.css” rel=”stylesheet” type=”text/css” />
      </head>
      <body id=”peter_pajamas_10″>
      <div class=”frame-2″>
      Peter's family
      <p id=”p10-2″ class=”text”>Every hero has a family.<br /> This is Peter’s family.</p>
      <div class=”audio-frame”>
      <audio src=”audio/hero_p10.mp3″ controls=”controls”>
      </audio>
      </div>
      </div>
      </body>
      </html>

      Before anyone says anything about .leftside/.rightside for spread images and overflow, that’s something for the next time. I am aware of it, but there’s now a time crunch on this, and the audio is what’s important. Does anyone know WHY my audio is not playing on the other 31 pages where it’s positioned in this EPUB? I thought about using the ids that are assigned to the audio files in the manifest, but these cause the controls to fall off the page bottom. I don’t want these to autoplay.

      Should I make a separate class for each audio div? Use an id? I’ve read so much and seen so much conflicting information elsewhere that I’m a little frustrated now. I’m grateful for whatever advice you may have. Thanks in advance.

      By the way, I like the site redesign!

    • August 30, 2013 at 11:39 am #65119
      Shawn Girsberger
      Member

      Okay, so I think I may have figured it out.

      If I structure my HTML like so for the div audio-frame:

      <div id=”p10-3″ /*this is arbitrary, of course — based on page 10, element 3*/ class=”audio-frame”>

      and include this in the CSS:

      #p10-3 {
      }

      it seems to work?

    • August 30, 2013 at 11:53 am #65120
      Shawn Girsberger
      Member

      Actually, the id isn’t necessary. The HTML and CSS were fine as they were.

      The key is zooming. If the controller occupies too small a space, it doesn’t function, and that was the problem. I discovered this when I had to send the book to someone to look at on an iPhone (I would never read it or try to play the tracks there). When I tapped the Play arrow, nothing happened, but when I zoomed and could then see the entire controller, everything worked beautifully. Moral of the story is to make it big or go home.

      Thank goodness for CSS.

    • August 30, 2013 at 1:11 pm #65121
      Shawn Girsberger
      Member

      I really do know my left from my right. I meant “audio on every verso — every left-hand page of each spread”.

  • Author
    Posts
Viewing 3 reply threads
  • The forum ‘EPUB and eBook’ is closed to new topics and replies.
Forum Ads