5545 sujets

Sémantique web et HTML

[Résolu] Problème EPUB et balise <audio>

Bonjour,

dsl 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

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

Merci d'avoir pris le temps de me répondre 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é.


Merci à vous de m'avoir conseillé.

Glouton1er

<!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>

Modifié par Glouton1er (22 Nov 2018 - 19:10)
J'ai oublier de mettre une images du rendu ATTENTION le code n'as pas encore reçu sont code CSS Smiley langue

upload/1542910618-73340-rendu.png
Modifié par Glouton1er (22 Nov 2018 - 19:17)
Sujet clos
Aller à