Imprimer la Page | Fermez la fenêtre

Code Visuel(mp3 player) Html CSS et java

Imprimé depuis: Forum openElement
Categorie:

openElement


Nom du Forum: Code (JS, PHP, CSS etc.), techniques etc.
Description du Forum: Discussions concernant le développement Web en général
URL: https://forums.openelement.uk/fr/forum_posts.asp?TID=22504
Date: 20 Avr 2024 à 08:17
Version logiciel: Web Wiz Forums 12.04 - http://www.webwizforums.com


Sujet: Code Visuel(mp3 player) Html CSS et java
Posté par: leobensalem
Sujet: Code Visuel(mp3 player) Html CSS et java
Posté le: 21 Jan 2017 à 19:20
Bonjour, j'ai un problème, j'ai un lecteur mp3 qui fonctionne très bien mais dès que j'insert le code HTML en mode code visuel, le lecteur s'affiche  mais impossible de lire les fichiers et impossible le déclancher, j'ai l'impression que certaines fonctions du JAVA ne sont pas prises en compte....pourquoi Angry?? 
A noter que le lecteur fonctionne très bien quand j'insert le code HTML en code Source...mais ça s'affiche en tête de site, et je ne souhaite pas que ça s'affiche à cet endroit, je veux placer le code HTML dans un panneau d'élément, merci pour votre aide Smile

voilà une capture d'écran pour vous montrer ou le lecteur s'affiche en code source:
http://www.hostingpics.net/viewer.php?id=327949codesource.jpg

Et la une image pour vous montrer ou je souhaite qu'il s'affiche, mais il est inactif, impossible de lire les fichers...
http://www.hostingpics.net/viewer.php?id=386244codevisuel.jpg



voilà le code: 

HTML:

<!-- jade: compressed-->
<ul class="audio-players">
  <li>
    <div class="audio-player js-audio-player">
      <button class="audio-player__control js-control">
        <div class="audio-player__control-icon"></div>
      </button>
      <h4 class="audio-player__title">To Night</h4>
      <audio preload="auto">
        <source src="Files/Audio/To Night.mp3"/>
      </audio><img class="audio-player__cover" src="Files/Image/9fecec53f9d1322a2c34ff659b2887550000.png"/>
      <video preload="auto" loop="loop">
        <source src="Files/Video/audio-waves.mp4" type="video/mp4"/>
      </video>
    </div>
  </li>
  <li>
    <div class="audio-player js-audio-player">
      <button class="audio-player__control js-control">
        <div class="audio-player__control-icon"></div>
      </button>
      <h3 class="audio-player__title">Audio Clip Two</h3>
      <audio preload="auto">
        <source src="http://pd.npr.org/anon.npr-mp3/npr/ama/2016/06/20160607_ama_bandbonus.mp3"/>
      </audio><img class="audio-player__cover" src="https://unsplash.it/g/300/?image=48"/>
      <video preload="auto" loop="loop">
        <source src="Files/Video/audio-waves.mp4" type="video/mp4"/>
      </video>
    </div>
  </li>
  <li>
 
  <div class="audio-player js-audio-player">
      <button class="audio-player__control js-control">
        <div class="audio-player__control-icon"></div>
      </button>
      <h3 class="audio-player__title">Audio Clip 4</h3>
      <audio preload="auto">
        <source src="Files/Audio/Black room.mp3"/>
      </audio><img class="audio-player__cover" src="Files/Image/9fecec53f9d1322a2c34ff659b2887550000.png"/>
      <video preload="auto" loop="loop">
        <source src="Files/Video/audio-waves.mp4" type="video/mp4"/>
      </video>
    </div>
  </li>
  <li>
    <div class="audio-player js-audio-player">
      <button class="audio-player__control js-control">
        <div class="audio-player__control-icon"></div>
      </button>
      <h3 class="audio-player__title">Audio Clip Three</h3>
      <audio preload="auto">
        <source src="http://pd.npr.org/anon.npr-mp3/npr/pchh/2016/08/20160801_pchh_mtv.mp3"/>
      </audio><img class="audio-player__cover" src="https://unsplash.it/g/300/?image=43"/>
      <video preload="auto" loop="loop">
        <source src="Files/Video/audio-waves.mp4" type="video/mp4"/>
      </video>
    </div>
  </li>
</ul>


CSS:


*,
*:before,
*:after {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  font-family: sans-serif;
  
  margin: 0;
  bottom          : 0;
  width: 100%;
  
  
  
}
img,
video {
  max-width: 100%;
  height: auto;
}
.audio-player {
  position: relative;
  width: 100%;
  height: 0;
  text-align: center;
  padding-bottom: 100%;
  background-color: #7726e4;
}
.audio-player video {
  opacity: 0;
  -webkit-transition: opacity 300ms;
  transition: opacity 300ms;
  will-change: opacity;
}
.audio-player:focus .audio-player__cover,
.audio-player:hover .audio-player__cover,
.audio-player.is-playing .audio-player__cover {
  opacity: 0.35;
}
.audio-player:focus .audio-player__title,
.audio-player:hover .audio-player__title,
.audio-player.is-playing .audio-player__title {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.audio-player:focus .audio-player__control-icon,
.audio-player:hover .audio-player__control-icon,
.audio-player.is-playing .audio-player__control-icon {
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
}
.audio-player.is-playing .audio-player__cover {
  opacity: 0;
}
.audio-player.is-playing video {
  opacity: 1;
}
.audio-player.is-playing .audio-player__control-icon:before {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.audio-player.is-playing .audio-player__control-icon:after {
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
}
.audio-player__cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transition: opacity 350ms;
  transition: opacity 350ms;
  will-change: opacity;
}
.audio-player__title {
  position: absolute;
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  left: 10px;
  right: 10px;
  bottom: 0;
  top: 50%;
  padding-top: 50px;
  -webkit-transform: translateY(-5%);
          transform: translateY(-5%);
  z-index: 10;
  opacity: 0;
  -webkit-transition: all 300ms;
  transition: all 300ms;
  will-change: transform, opacity;
}
.audio-player__control {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  border: none;
  background: none;
  cursor: pointer;
}
.audio-player__control:focus {
  outline: none;
}
.audio-player__control-icon {
  position: absolute;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  border: 3px solid #fff;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  overflow: hidden;
  -webkit-transition: all 250ms ease-out;
  transition: all 250ms ease-out;
  -webkit-transform: scale(1);
          transform: scale(1);
  will-change: transform;
}
.audio-player__control-icon::after,
.audio-player__control-icon::before {
  -webkit-transition: all 200ms;
  transition: all 200ms;
  will-change: transform;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.audio-player__control-icon::after {
  left: 5px;
  width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 20px solid #fff;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.audio-player__control-icon::before {
  width: 15px;
  height: 30px;
  border-right: 6px solid #fff;
  border-left: 6px solid #fff;
  -webkit-transform: translateY(-50px);
          transform: translateY(-50px);
}
.audio-players {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.audio-players li {
  display: inline-block;
  vertical-align: top;
  max-width: 300px;
  margin: 20px;
}

JAVA:

var $player = $('.js-audio-player')
  , $playbackClass = 'is-playing'
  , $fadeDuration = 500

$player.each(function(index) {
  var $this = $(this)
    , id = 'audio-player-' + index

  $this.attr('id', id)

  $this.find('.js-control')[0].addEventListener('click', function() {
    resetPlayback(id)
    playback($this, $this.find('audio'), $this.find('video'))
  })
  
  // Reset state once audio has finished playing
  $this.find('audio')[0].addEventListener('ended', function() {
    resetPlayback()
  })
})

function playback($player, $audio, $video) {
  if ($audio[0].paused) {
    $audio[0].play()
    $video[0].play()
    $audio.animate({ volume: 1 }, $fadeDuration)
    $player.addClass($playbackClass)
  } else {
    $audio.animate({ volume: 0 }, $fadeDuration, function() {
      $audio[0].pause()
      $video[0].pause()
    })
    $player.removeClass($playbackClass)
  }
}

function resetPlayback(id) {
  $player.each(function() {
    var $this = $(this)

    if ($this.attr('id') !== id) {
      $this.find('audio').animate({ volume: 0 }, $fadeDuration, function() {
        $(this)[0].pause()
        $this.find('video')[0].pause()
      })
      $this.removeClass($playbackClass)
    }
  })
}


Réponses:
Posté par: leobensalem
Posté le: 21 Jan 2017 à 20:01
Solution trouvée!!!! j'ai placé le JAVA dans un fichier externe et je suis allé le chercher avec la balise

<script type="text/javascript" src="lecteur.js"></script>

Merci quand même :p 


Imprimer la Page | Fermez la fenêtre

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net