Bonsoir,
Je souhaiterai contrôler mon surlignage avec les boutons du lecteur audio.
Je suis débutante en js/jquery donc je ne sais pas comment ça... si quelqu'un peut maider.
Merci
Voici mon code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Speak fast</title>
<script type="text/javascript">
var interID;
var x = 0;
var nbDiv = 6;
window.onload = function()
{
interID = setInterval(function()
{ surligne();}, 4000);
}
function surligne()
{
if (x == nbDiv)x=0;
for (i=0; i<nbDiv; i++)
{
document.getElementById("div"+(i+1)).style.backgroundColor = "white";
}
document.getElementById("div"+(x+1)).style.backgroundColor = '#7FFFD4';
x++;
}
function stop()
{ clearInterval(interID); }
</script>
<!-- lecteur audio -->
<div id="divPlayer">
<h1>Audio-Player</h1>
<audio id="audioPlayer" src="JustGiveMeAReason.mp3" ontimeupdate="update(this)"></audio></br>
<div>
<div id="progressBarControl">
<div id="progressBar" onclick="clickProgress('audioPlayer', this, event)">Pas de lecture</div>
</div>
<span id="progressTime">00:00</span>
</div>
<button class="control" onclick="play('audioPlayer', this)">Play</button>
<button class="control" onclick="resume('audioPlayer')">Stop</button></br></br>
<span class="volume">
<a class="stick1" onclick="volume('audioPlayer', 0)"></a>
<a class="stick2" onclick="volume('audioPlayer', 0.3)"></a>
<a class="stick3" onclick="volume('audioPlayer', 0.5)"></a>
<a class="stick4" onclick="volume('audioPlayer', 0.7)"></a>
<a class="stick5" onclick="volume('audioPlayer', 1)"></a>
</span>
</div></br>
<script type="text/javascript">
function play(idPlayer, control) {
var player = document.querySelector('#' + idPlayer);
if (player.paused) {
player.play();
control.textContent = 'Pause';
} else {
player.pause();
control.textContent = 'Play';
}
}
function resume(idPlayer) {
var player = document.querySelector('#' + idPlayer);
player.currentTime = 0;
player.pause();
}
function volume(idPlayer, vol) {
var player = document.querySelector('#' + idPlayer);
player.volume = vol;
}
function update(player) {
var duration = player.duration; // Durée totale
var time = player.currentTime; // Temps écoulé
var fraction = time / duration;
var percent = Math.ceil(fraction * 100);
var progress = document.querySelector('#progressBar');
progress.style.width = percent + '%';
progress.textContent = percent + '%';
document.querySelector('#progressTime').textContent = formatTime(time);
}
function formatTime(time) {
var hours = Math.floor(time / 3600);
var mins = Math.floor((time % 3600) / 60);
var secs = Math.floor(time % 60);
if (secs < 10) {
secs = "0" + secs;
}
if (hours) {
if (mins < 10) {
mins = "0" + mins;
}
return hours + ":" + mins + ":" + secs; // hh:mm:ss
} else {
return mins + ":" + secs; // mm:ss
}
}
function clickProgress(idPlayer, control, event) {
var parent = getPosition(control); // La position absolue de la progressBar
var target = getMousePosition(event); // L'endroit du la progressBar où on a cliqué
var player = document.querySelector('#' + idPlayer);
var x = target.x - parent.x;
var y = target.y - parent.y;
var wrapperWidth = document.querySelector('#progressBarControl').offsetWidth;
var percent = Math.ceil((x / wrapperWidth) * 100);
var duration = player.duration;
player.currentTime = (duration * percent) / 100;
}
function getMousePosition(event) {
if (event.pageX) {
return {
x: event.pageX,
y: event.pageY
};
} else {
return {
x: event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
y: event.clientY + document.body.scrollTop + document.documentElement.scrollTop
};
}
}
function getPosition(element){
var top = 0, left = 0;
while (element) {
left += element.offsetLeft;
top += element.offsetTop;
element = element.offsetParent;
}
return { x: left, y: top };
}
</script>
<style>
/* syllabes */
.syllabe
{
color: red;
font-size: 16px;
}
.syllabeHaute
{
color: blue;
font-size: 20px;
}
.syllabeBasse
{
color: #FFA500;
font-size: 10px;
}
/* lecteur audio */
#divPlayer
{
width: 300px;
height: 120px;
margin-left: auto;
margin-right: auto;
border: 1px double #aaa;
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-top: 50px;
}
/*Titre*/
h1
{
font-size: 17px;
line-height: 30px;
margin: 0;
padding: 0;
margin-bottom: 25px;
border-bottom: #000 1px solid;
}
/*Bouton*/
button, input[type='button'], input[type='submit']
{
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
background: -moz-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
border: 1px solid #aaa;
color: #444;
margin-bottom: 0px;
min-width: 4em;
padding: 3px 12px 3px 12px;
font-size: 12px;
cursor: pointer;
display: inline-block;
}
button:hover, input[type='button']:hover, input[type='submit']:hover
{
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
background: #ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
background: #ebebeb -moz-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
border-color: #999;
color: #222;
display: inline-block;
}
.control
{
width: 78px;
}
/*barre de progression*/
#progressBarControl
{
width: 210px;
height: 15px;
border: 1px solid #aaa;
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 5px;
display: inline-block;
}
#progressBar
{
width: 0px;
background: #ebebeb;
height: 15px;
text-align: right;
line-height: 15px;
font-size: 9px;
white-space: nowrap;
cursor: pointer;
}
#progressTime
{
font-size: 10px;
color: #666;
}
/*volume*/
.volume
{
vertical-align: bottom;
display: inline-block;
height: 20px;
white-space: nowrap;
position: relative;
width: 40px;
}
.volume a
{
display: inline-block;
background: #ebebeb;
width: 8px;
vertical-align: bottom;
margin-left: 165px;
margin-right: 0px;
margin-bottom: 40px;
cursor: pointer;
border-left: 1px solid #fff;
position: absolute;
bottom: 0;
}
.stick1
{
height: 5px;
left: 0px;
}
.stick2
{
height: 10px;
left: 9px;
}
.stick3
{
height: 15px;
left: 18px;
}
.stick4
{
height: 20px;
left: 27px;
}
.stick5
{
height: 25px;
left: 36px;
}
/*Texte*/
#divText
{
width: 300px;
margin-left: auto;
margin-right: auto;
border: 1px double #aaa;
border-radius: 5px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-top: -20px;
}
</style>
</head>
<body>
<div id="divText">
<span class=text id="div1">An <span class="syllabe">Aus</span><span class="syllabeHaute">tra</span>li<span class="syllabeBasse">a</span>n couple have had their motorcycle stolen in south Wales</br></span>
<span class=text id="div2">- just one day before completing their journey in London.</br></span>
<span class=text id="div3"> Ralph Dixon, 42, and Fionnuala Livingston, 40, </br></span>
<span class=text id="div4"> had stopped for a break on the M4 but returned to find their BMW F650 missing. </br></span>
<span class=text id="div5">The Sydney couple also lost gifts they had been given by people all over the world, </br></span>
<span class=text id="div6"> and CDs containing photographs of their journey.</br></span>
</div>
</body>
</html>
Actuellement, mon code va surligner chaque ligne pendant 4 secondes puis passer à la suivante. J'aimerai que lorsque j'appuie sur play, le surlignage commence, en appuyant sur pause, il se mette en pause et en appuyant sur stop il s'arrête.
