Embed multiple file in HTML/CSS

JavaScript
1

I am creating a book in form of web application where each page has a unique audio file (ex: page1 has audio1; page2 has audio2) associated with it and the audio starts playing when I turn the page(i.e when I turn to page1 audio 1 starts when I turn to page 2 audio 1 stops and audio 2 starts). How to achieve this? I am associating audio and page file with a div element. I am using turn.js

<head>
<meta name="viewport" content="width = 1050, user-scalable = no" />
<script type="text/javascript" src="../../extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="../../extras/modernizr.2.5.3.min.js"></script>
</head>
<body>

<div class="flipbook-viewport">
	<div class="container">
		<div class="flipbook">

			<div div style="background-image:url(pages/0.jpg)"><audio id ="1" audio autoplay="true" src="audio1.mp3"></div>
			<div style="background-image:url(pages/first page.jpg)"><audio id="2" audio autoplay="true" src="audio2"></div>
			<div style="background-image:url(pages/1.jpg)"><audio id="2" audio autoplay="true" src="audio3"></div>
			
		</div>
	</div>
</div>

<script type="text/javascript">


window.addEventListener("play", function(evt)
{
if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target)    {
        window.$_currentlyPlaying.pause();
    }
    window.$_currentlyPlaying = evt.target;
}, true);
2

Not sure I can help much, but there are a couple of things you might look at:

  1. The turn.js file doesn’t appear to be referenced in your code anywhere
  2. The code isn’t complete - no closing </script> tag for sure, but there maybe other JS code missing too.
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.