Compatibilité Lecteur audio JS

jlemonde Messages postés 23 Statut Membre -  
jlemonde Messages postés 23 Statut Membre -
Bonjour,

J'ai fait un petit lecteur audio en HTML CSS JavaScript, mais il n'est pas compatible avec tous les navigateurs. Il ne fonctionne que sous Chrome & Safari. J'ai notement un probleme avec event.offsetX, ... 

  <style>
   .audioPlayerButton {user-select:none; -webkit-user-select:none; -moz-user-select:none; cursor:pointer; border:1px solid black; text-align:center; font-size:10px; font-family:Trebuchet MS; font-weight:bold;}
  </style>
  <script>
   var audioPlayerTimeInterval = setInterval(function(){audioPlayerTimeSlider.style.width = audioPlayerA.currentTime / audioPlayerA.duration * 100 + '%';},100);
  </script>
  <table id="audioPlayer">
   <tr>
    <td colspan="3" id="audioPlayerDuration" class="audioPlayerButton" onclick="audioPlayerA.currentTime = event.offsetX / 175 * audioPlayerA.duration;" style="width:170px; height:14px; line-height:14px;">
     <div id="audioPlayerTimeSlider" style="background-color:rgb(170,170,170); width:0%; height:100%;"></div>
    </td>
   </tr>
   <tr>
    <td rowspan="2" id="audioPlayerPlay" class="audioPlayerButton" onclick="audioPlayerA.play();" style="width:54px; height:38px; line-height:38px;">Play</td>
    <td rowspan="2" id="audioPlayerPause" class="audioPlayerButton" onclick="audioPlayerA.pause();" style="width:54px; height:38px; line-height:38px;">Pause</td>
    <td id="audioPlayerVolume" class="audioPlayerButton" onclick="audioPlayerA.volume = event.offsetX / 58; audioPlayerVolumeSlider.style.width =  event.offsetX / 58 * 100 + '%'; audioPlayerVolumeText.innerHTML = 'Volume ' + Math.round(audioPlayerA.volume * 100);" style="width:58px; height:18px; line-height:18px;">
     <div id="audioPlayerVolumeSlider" style="position:relative; top:9px; background-color:rgb(170,170,170); width:100%; height:100%;"></div>
     <div id="audioPlayerVolumeText" style="position:relative; top:-9px; width:100%; height:100%;">Volume 100</div>
    </td>
   </tr>
   <tr>
    <td id="audioPlayerVolumeMute" class="audioPlayerButton" onclick="audioPlayerA.volume = 0; audioPlayerVolumeSlider.style.width = '0%'; audioPlayerVolumeText.innerHTML = 'Volume 0';">Mute</td>
   </tr>
  </table>
  <audio id="audioPlayerA">
   <source id="audioPlayerMP3" src="music.mp3">

   <embed id="audioPlayerB" src="music.mp3">
  </audio>


Arriverez-vous à m'aider ?? Cela m'arrangerait vraiment.

A voir également:

2 réponses

Réponse 1 / 2
jlemonde Messages postés 23 Statut Membre
 
P.S., pour tester, il vous faut un fichier audio et vous changez le nom dans la balise audio à la fin du code.
0
Réponse 2 / 2
jlemonde Messages postés 23 Statut Membre
 
Avec une nouvelle version du code, celui-ci fonctionne aproximativement sous Firefox, mais rien ne se passe sous IE (c'est une grosse daube celui-ci)... 

  <style>
   .audioPlayerButton {user-select:none; -webkit-user-select:none; -moz-user-select:none; cursor:pointer; border:1px solid black; text-align:center; font-size:10px; font-family:Trebuchet MS; font-weight:bold;}
  </style>
  <script>
   var audioPlayerTimeInterval = setInterval(function(){audioPlayerTimeSlider.style.width = audioPlayerA.currentTime / audioPlayerA.duration * 100 + '%';},100);
  </script>
  <table id="audioPlayer">
   <tr>
    <td colspan="3" id="audioPlayerDuration" class="audioPlayerButton" ondblclick="audioPlayerA.currentTime = 0;" onclick="if(event.offsetX){audioPlayerA.currentTime = event.offsetX / 178 * audioPlayerA.duration;} else{audioPlayerA.currentTime = event.layerX / 178 * audioPlayerA.duration;}" style="width:170px; height:14px; line-height:14px;">
     <div id="audioPlayerTimeSlider" style="background-color:rgb(170,170,170); width:0%; height:100%;"></div>
    </td>
   </tr>
   <tr>
    <td rowspan="2" id="audioPlayerPlay" class="audioPlayerButton" onclick="audioPlayerA.play();" style="width:54px; height:38px; line-height:38px;">Play</td>
    <td rowspan="2" id="audioPlayerPause" class="audioPlayerButton" onclick="audioPlayerA.pause();" style="width:54px; height:38px; line-height:38px;">Pause</td>
    <td id="audioPlayerVolume" class="audioPlayerButton" onclick="if(event.offsetX){audioPlayerA.volume = event.offsetX / 58;} else{audioPlayerA.volume = event.layerX / 58;} audioPlayerVolumeSlider.style.width =  audioPlayerA.volume * 100 + '%'; audioPlayerVolumeText.innerHTML = 'Volume ' + Math.round(audioPlayerA.volume * 100);" style="width:58px; height:18px; line-height:18px;">
     <div style="width:100%; height:100%; position:relative;">
      <div id="audioPlayerVolumeSlider" style="position:absolute; top:0px; background-color:rgb(170,170,170); width:100%; height:100%;"></div>
      <div id="audioPlayerVolumeText" style="position:absolute; top:0px; width:100%; height:100%; line-height:14px;">Volume 100</div>
     </div>
    </td>
   </tr>
   <tr>
    <td id="audioPlayerVolumeMute" class="audioPlayerButton" onclick="audioPlayerA.volume = 0; audioPlayerVolumeSlider.style.width = '0%'; audioPlayerVolumeText.innerHTML = 'Volume 0';" style="width:58px; height:18px; line-height:18px;">Mute</td>
   </tr>
  </table>
  <audio id="audioPlayerA">
   <source id="audioPlayerS1" src="music.mp3">
   <source id="audioPlayerS2" src="http://offog.org/music/recorded/mermaid-v2.ogg">

   <embed id="audioPlayerB" src="music.mp3">
  </audio>
0

Discussions similaires

pas de lecteur CD sur la voiture
coco -
coco -

2 réponses