MobileRead Forums - View Single Post

rightawn · 07-11-2022, 11:42 AM

Hello,

I am new to this forum and this is my first time posting.

I have been struggling to convert my physical book to an Epub3 for a few months.

The challenges are that the book needs to be viewed in a fixed format and an audio player needs to display within the fixed page svg viewbox.

I used a method similar to Abekonge to get the page displayed properly but have not figured out a way to incorporate the audio player into the SVG viewbox with the image.

Currently, my audio player appears outside of the viewbox which creates problems in the e-reader.

I need to find a way to display the audio box over the image within the SVG viewbox.

Any help you could provide would be greatly appreciated!

Thanks!

Here's the code I've been using in the Epub3:

<body>
<h2 style="text-align: center; padding: 0pt; margin: 0pt;">
<audio controls="controls" src="../Audio/etude6.mp3">etude6</audio>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1020 660" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="1020" height="660" xlink:href="../Images/painting6.png"/>
</svg>
</h2>
</body>

07-11-2022, 11:42 AM	#9
rightawn Junior Member Posts: 7 Karma: 10 Join Date: Jul 2022 Device: none	SVG for Fixed Ebook Viewing Hello, I am new to this forum and this is my first time posting. I have been struggling to convert my physical book to an Epub3 for a few months. The challenges are that the book needs to be viewed in a fixed format and an audio player needs to display within the fixed page svg viewbox. I used a method similar to Abekonge to get the page displayed properly but have not figured out a way to incorporate the audio player into the SVG viewbox with the image. Currently, my audio player appears outside of the viewbox which creates problems in the e-reader. I need to find a way to display the audio box over the image within the SVG viewbox. Any help you could provide would be greatly appreciated! Thanks! Here's the code I've been using in the Epub3: <body> <h2 style="text-align: center; padding: 0pt; margin: 0pt;"> <audio controls="controls" src="../Audio/etude6.mp3">etude6</audio> <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1020 660" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"> <image width="1020" height="660" xlink:href="../Images/painting6.png"/> </svg> </h2> </body>