EPUB et balise <audio>si play 2 alors stop 1

**Glouton1er** · 19/11/2018, 23h30

Bonjour,

désolé si le titre n'est pas très clair !

Voilà j'ai un petit problème je travaille actuellement sur un projet pour une société en free-lance et j'ai un petit moyen soucie,
Dans le cahier des charges de mon client il mais demander de crée un livre au format EPUB jusque-là aucun problème, mais dedans le client a voulu intégré des musiques sa aussi cela n'as pas poser de soucie particulier.

Par contre au dernier moment il me demander de faire en sorte que quand on à lancer une première musique celle-ci se coupe quand on lance la suivante ! c'est là ou est mon problème, j'ai donc commencer à lancer des recherches de code source sur le net mais ils sembleraient que personne ne se soit pencher là-dessus, ou alors c'est moi qui suit une busse car je n'ai malheureusement rien trouvé!

Auriez-vous une idée !?

Note informative: A savoir que le format EPUB et un mélange de XHTML et de XML le tout compresser au format zip et renommer en EPUB du moins de ce que j'en sais.
Autre chose le code source d'intégration des musiques n'est ni plus ni moins qu'une balise audio

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<audio controls="controls" src="../Audio/01 Hopeless.mp3"></audio>

**Glouton1er** · 22/11/2018, 19h14

Bonjour,

Merci d'avoir pris le temps de ne pas me répondre !!!

Je mais quand même la solution pour les jeunes programmeur qui cherche à se gère de code j'ai trouvé un code lecteur audio que j'ai modifié pour qu'il s’intègre facilement au livre de type EPUB 2.0 et 3.0.
J'ai aussi modifier le code JS mais je ne suis pas sûr qu'il soit bien optimisé mais sa a le mérite d'être simple et fonctionnel, il me reste encore à intégrer le CSS pour un rendu propre dans le livre.

Je suis preneur de conseil si on peut l'optimiser en peu mieux, voilà je reste à disposition si d'autre personne on des questions

PS: le bouton STOP peut-être déplacer là où l'on veut, autre chose quand exemple:
Page 10 on trouve une musique Y on la lance, quand on arrive à la page 20 ou l'on trouve la musique Z on n’a pas besoin de stopper la Y on lance la Z celle-ci stoppe la Y et se lance !
Le bouton stop est la juste pour stopper si on en a marre d’écouté.

Glouton1er

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="fr">
	<title>Script de http://www.monnaielibre.creationmonetaire.info/ Modifier par Glouton1er</title>
<head>	
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type='text/javascript'>
$(window).load(function(){
var audio;
var playlist;
var tracks;
var current;
init();
function init(){
    current = 0;
    audio = $('audio');
    playlist = $('#playlist');
    tracks = playlist.find('li a');
    len = tracks.length - 1;
    audio[0].volume = .10;
    playlist.find('a').click(function(e){
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        run(link, audio[0]);
    });
    audio[0].addEventListener('ended',function(e){
        current++;
        if(current == len){
            current = 0;
            link = playlist.find('a')[0];
        }else{
            link = playlist.find('a')[current];    
        }
        run($(link),audio[0]);
    });
}
function run(link, player){
        player.src = link.attr('href');
        par = link.parent();
        par.addClass('active').siblings().removeClass('active');
        audio[0].load();
        audio[0].play();
                audio[0].stop();
}
});
        </script>
</head>
<body>
	<br/><br/>
<div class="center"> 
  <audio id="audio" preload="auto" controlsList="nodownload" tabindex="0" disableControls=(false) type="audio/mpeg"> 
  Désolé, votre navigateur ne supporte pas HTML5 audio.</audio>
	<input type="button" name="stop" value="stop" onclick=document.getElementById("audio").src="">
	</div>
<ul id="playlist">
    <a class="active"><a href=#></a>
	<a href="test1.mp3"><input type="button" value="play" class="bouton" /></a></br>
	<a href="test2.mp3"><input type="button" value="play" class="bouton" /></a></br>
	<a href="test3.mp3"><input type="button" value="play" class="bouton" /></a></br>
	<a href="test4.mp3"><input type="button" value="play" class="bouton" /></a></br>
	<a href="test5.mp3"><input type="button" value="play" class="bouton" /></a></br>
    <a class="fin"><a href="test6.mp3"><input type="button" value="play" class="bouton" /></a></br></a>
</ul>
</body>
</html>

Nom : rendu.png
Affichages : 116
Taille : 16,0 Ko

EPUB et balise <audio>si play 2 alors stop 1

Conception Web

Vue hybride

Discussions similaires

Partager

Partager