BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Web Café > Code (JS, PHP, CSS etc.), techniques etc.
  Nouveaux messages Nouveaux messages Fil RSS  - Code Visuel(mp3 player) Html CSS et java
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Code Visuel(mp3 player) Html CSS et java

 Répondre Répondre
Auteur
Message
leobensalem allez vers le bas
Newbie
Newbie


Depuis le: 21 Jan 2017
Status: Inactif
Points: 3
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer leobensalem Citer  RépondreRéponse Lien Direct à ce Post Sujet: Code Visuel(mp3 player) Html CSS et java
    Envoyé : 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)
    }
  })
}

Haut de la page
leobensalem allez vers le bas
Newbie
Newbie


Depuis le: 21 Jan 2017
Status: Inactif
Points: 3
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer leobensalem Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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 
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.063 secondes.