"Annuleer" knop die audio onthoudt
Ik en een vriend zijn bezig met een applicatie waarin audio een belangrijke rol speelt. Het is namelijk een audio tour in de vorm van een website, die je met behulp van je smartphone kunt lopen.
Je loopt van locatie naar locatie en tijdens het lopen wordt er audio afgespeeld. We hebben twee audio knoppen: play en pause.
De code werkt perfect. Nu is de vraag: tijdens de tour wil je misschien stoppen. Je drukt op "stoppen" en komt op een stop pagina terecht. Je wilt toch niet stoppen, en drukt op "annuleren" en gaat met de tour verder. Nu is onze vraag of er een Javascript code of iets anders is die de audio kan onthouden, en dus weet waar je bent gebleven, zodat je niet hele hele verhaal opnieuw moet horen.
code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#play-bt").click(function(){
$("#audio-player")[0].play();
})
$("#pause-bt").click(function(){
$("#audio-player")[0].pause();
})
})
</script>
<div id="button">
<audio id="audio-player" name="audio-player" autoplay="autoplay" src="audio/ChanuryNo1.mp3"></audio>
<a class="links" href="#links"></a>
<a id="pause-bt" href="#pause"></a>
<a id="play-bt" href="#play"></a>
<a class="rechts" href="#tour"></a>
</div>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
$(document).ready(function(){
$("#play-bt").click(function(){
$("#audio-player")[0].play();
})
$("#pause-bt").click(function(){
$("#audio-player")[0].pause();
})
$("#stop-bt").click(function(){
$("#audio-player")[0].pause();
$("#tour").css("display","none");
$("#stop-page").css("display","block");
})
$("#annuleer-bt").click(function(){
$("#audio-player")[0].play();
$("#tour").css("display","block");
$("#stop-page").css("display","none");
})
})
</script>
$(document).ready(function(){
$("#play-bt").click(function(){
$("#audio-player")[0].play();
})
$("#pause-bt").click(function(){
$("#audio-player")[0].pause();
})
$("#stop-bt").click(function(){
$("#audio-player")[0].pause();
$("#tour").css("display","none");
$("#stop-page").css("display","block");
})
$("#annuleer-bt").click(function(){
$("#audio-player")[0].play();
$("#tour").css("display","block");
$("#stop-page").css("display","none");
})
})
</script>
Gewijzigd op 15/12/2011 21:30:34 door Nick Dijkstra
Ten tweede, leest de javascript history back functie ook dat de knop hem pauzeert on click, zodat ik hem kan gebruiken op de stop pagina?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
$(document).ready(function(){
$("#play-bt").click(function(){
$("#audio-player")[0].play();
})
$("#pause-bt").click(function(){
$("#audio-player")[0].pause();
})
$("#stop-bt").click(function(){
$("#audio-player")[0].pause();
$("#tour").css("display","none");
$("#stop-page").css("display","block");
})
$("#annuleer-bt").click(function(){
$("#audio-player")[0].play();
$("#tour").css("display","block");
$("#stop-page").css("display","none");
})
$("#leave-bt").click(function(){
//verlaat audio tour
})
})
</script>
$(document).ready(function(){
$("#play-bt").click(function(){
$("#audio-player")[0].play();
})
$("#pause-bt").click(function(){
$("#audio-player")[0].pause();
})
$("#stop-bt").click(function(){
$("#audio-player")[0].pause();
$("#tour").css("display","none");
$("#stop-page").css("display","block");
})
$("#annuleer-bt").click(function(){
$("#audio-player")[0].play();
$("#tour").css("display","block");
$("#stop-page").css("display","none");
})
$("#leave-bt").click(function(){
//verlaat audio tour
})
})
</script>
<div id="tour">
Audio tour
</div>
<div id="stop-page" style="display:none;">
Weet u zeker dat u wilt stoppen met de tour?
<input type="button" id="annuleer-bt" value="Annuleer"><input type="button" id="leave-bt" value="Stop">
</div>
Is dat gewoon in een div?
De code verbergt de div waar de tour in staat en laat de stop div zien, dus de text.
De tour staat dus nog wel op de pagina, maar is verborgen. Zo onthoud hij nog gewoon waar hij is gebleven.
EDIT: Als je de iframe gebruikt weet ik niet of de javascript code werkt.
Gewijzigd op 15/12/2011 22:26:24 door Nick Dijkstra