first off: thanks for your time!
my problem: I would like to load an image, but only after event1 is triggered. event1 loads a sound, when the button is clicked. So i would like to play an image and a sound at the same time.
i already have the code for the sound below. can somebody please tell me how to insert the image in the code?
best regards, Marc
<!doctype html>
<!--
~ /*******************************************************************************
~ jquery.mb.components
~ file: demo_queue.html
~
~ Copyright (c) 2001-2014. Matteo Bicocchi (Pupunzi);
~ Open lab srl, Firenze - Italy
~ email: matteo@open-lab.com
~ site: http://pupunzi.com
~ blog: http://ift.tt/1ivM0b1
~ http://open-lab.com
~
~ Licences: MIT, GPL
~ http://ift.tt/j1ALGl
~ http://ift.tt/iOSk4E
~
~ last modified: 07/01/14 22.50
~ ******************************************************************************/
-->
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<title>jquery.mb.audio - Queue</title>
<script type="text/javascript" src="http://ift.tt/11czYwS"></script>
<script type="text/javascript" src="inc/jquery.mb.audio.js?_=8y338"></script>
<script type="text/javascript">
/*
* DEFINE SOUNDS
*/
$.mbAudio.sounds = {
backgroundSprite: {
id: "backgroundSprite",
ogg: "sounds/bgndsSprite.ogg",
mp3: "sounds/bgndsSprite.mp3",
//example of sprite
sprite:{
intro : {id: "intro", start: 80, end: 116.975, loop: true},
levelIntro: {id: "levelIntro", start: 60, end: 77.470, loop: true},
tellStory: {id: "tellStory", start: 80, end: 116.975, loop: true},
level1 : {id: "level1", start: 5, end: 13, loop: true},
level2 : {id: "level2", start: 40, end: 56, loop: true},
level3 : {id: "level3", start: 120, end: 136.030, loop: true}
}
},
effectSprite: {
id: "effectSprite",
ogg: "sounds/effectsSprite.ogg",
mp3: "sounds/effectsSprite1.mp3",
//example of sprite
sprite:{
streak: {id: "streak", start: 0, end: 1.3, loop: 3},
great : {id: "great", start: 5, end: 8, loop: false},
divine: {id: "divine", start: 10, end: 12, loop: false},
wow : {id: "wow", start: 15, end: 24, loop: false},
levelIntro : {id: "levelIntro", start: 20, end: 25, loop: false},
levelCompleted: {id: "levelCompleted", start: 25, end: 30, loop: false},
subLevelLost: {id: "subLevelLost", start: 35, end: 38.1, loop: false},
subLevelWon : {id: "subLevelWon", start: 30, end: 31.9, loop: false},
gameWon : {id: "gameWon", start: 30, end: 31.9, loop: false}
}
}
};
function audioIsReady(){
setTimeout(function(){
$('#buttons').fadeIn();
$("#loading").hide();
if(isStandAlone || !isDevice)
$.mbAudio.queue.add('backgroundSprite',"levelIntro");
},3000);
}
$(document).on("initAudio", function () {
$.mbAudio.pause('effectSprite', audioIsReady);
$('#start').hide();
$("#loading").show();
});
$(document).on("event1", function () {toggleButtons(); $.mbAudio.queue.add('effectSprite', 'great',toggleButtons)});
$(document).on("event2", function () {toggleButtons(); $.mbAudio.queue.add('effectSprite', 'divine',toggleButtons)});
$(document).on("event3", function () {toggleButtons(); $.mbAudio.queue.add('effectSprite', 'streak',toggleButtons)});
$(document).on("event4", function () {$.mbAudio.queue.add('backgroundSprite', 'levelIntro')});
function toggleButtons(){
$("button").toggleClass("disabled");
}
</script>
<style>
body{
padding: 50px;
}
button{
display: block;
margin: 30px 10px;
padding: 10px;
}
button.disabled{
opacity:.3;
}
</style>
</head>
<body>
<a href="http://ift.tt/1Eps8mp"><img style="width:100px; position: absolute; top: 20px; right: 20px; border:
0; z-index: 1000" src="http://ift.tt/19zCFh9" alt="Fork me on GitHub"></a>
<h2>jquery.mb.audio API: Using the Queue and the sprite features.</h2>
<p>To "add" a soud to the queue:<br>
<b>$.mbAudio.queue.add(audio, sprite)</b></p>
<div id="start">
<p>This button is needed to initialize audio (see the table in the documentation) [todo: wiki].</p>
<script>
if((isiOs && isStandAlone) || !isDevice){
document.write("<p>This button will also initialize the effects sprite and will play the background sprite (only
iOS).</p>")
}
</script>
<button style="cursor:pointer" onmousedown="$(document).trigger('initAudio')">Lets start</button>
</div>
<div id="loading" style="display: none;">... loading ...</div>
<div id="buttons" style="display: none;">
<p>The three buttons below play sounds from the same audio file (sounds/bgndsSprite .mp3 or .ogg)</b></p>
<button style="cursor:pointer" onmousedown="$(document).trigger('event1')">play sound 1</button>
<br>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire