Probleme beim Anhängen eines Embed-Players richtig

Ich habe eine Webseite mit einigen Symbolen, wie Feuer, Kaffeetasse, Auto. Die Hauptidee hier ist, dass, wenn ein Benutzer auf diese Symbole klickt, ich möchte, dass ein bestimmter Ambient-Sound gespielt wird, je nachdem auf welches Icon geklickt wurde. Das Problem hier ist, dass ich einen Spieler nicht richtig in die ungeordnete Liste einbetten kann, wie ich es möchte.Probleme beim Anhängen eines Embed-Players richtig

Zum Beispiel wird im Moment, wenn auf ein Symbol geklickt wird, der Verkehrssound wiedergegeben, obwohl das entsprechende Verkehrssymbol nie angeklickt wurde. Ich bin mir nicht ganz sicher, was ich falsch mache. Jede Hilfe würde sehr geschätzt werden.

<body> 
    <nav class="main-nav"> 
     <h3 class="nav-title">Trancool</h3> 
     <ul class="nav-list"> 
      <li>Home</li> 
      <li>About</li> 
      <li>Contact</li> 
     </ul> 
    </nav> 
    <div class="main-content"> 
     <header class="main-header"> 
      <h1>Trancool</h1> 
     </header> 
     <div class="primary-content"> 
      <ul class="song-list"> 
       <li class="play icons"><i class="coffee fa fa-coffee fa-trancool-icons" aria-hidden="true"></i></li> 
       <li class="play icons"><i class="traffic fa fa-car fa-trancool-icons" aria-hidden="true"></i></li> 
       <li class="play icons"><i class="rain fa fa-tint fa-trancool-icons" aria-hidden="true"></i></li> 
       <li class="play icons"><i class=" fire fa fa-fire fa-trancool-icons" aria-hidden="true"></i></li> 
      </ul> 
     </div> 
    <div> 
    <footer class="main-footer"> 
    <footer> 
    <script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script> 
    <script src="js/trancool.js" type="text/javascript"></script> 
</body> 









$('.song-list').on('click', 'i', function(event){ 
    if($(event.target.className === 'coffee')){ 
     if($('embed').length === 0){ 
      $(this).append('<embed id="embed_player" src="audio/cafe.wav" autostart="true" hidden="true"></embed>') 
     } 
     else{ 
      $('embed').remove(); 
     } 
    } 

    if($(event.target.className === 'rain')){ 
     if($('embed').length === 0){ 
      $(this).append('<embed id="embed_player" src="audio/rain.mp3" autostart="true" hidden="true"></embed>') 
     } 
     else{ 
      $('embed').remove(); 
     } 
    } 

    if($(event.target.className === 'traffic')){ 
     if($('embed').length === 0){ 
      $(this).append('<embed id="embed_player" src="audio/traffic.mp3" autostart="true" hidden="true"></embed>') 
     } 
     else{ 
      $('embed').remove(); 
     } 
    } 

});

Quelle

2017-02-23 Kevin Dunn

Entfernen Sie die einbetten von Ihrem js-Code und eine Zeit auf Ihrem html setzen, das Symbol-Klasse-ID ändern und dann versuchen, diese

var sounds = { 
 
    'coffee': 'audio/cafe.wav', 
 
    'rain': 'audio/rain.mp3', 
 
    'traffic': 'audio/traffic.mp3' 
 
}; 
 

 
$('.song-list').on('click', 'i', function(event) { 
 
    var file = sounds[event.target.id]; 
 
    $('#embed_player').attr('src', file); 
 
});

<body> 
 
    <nav class="main-nav"> 
 
     <h3 class="nav-title">Trancool</h3> 
 
     <ul class="nav-list"> 
 
      <li>Home</li> 
 
      <li>About</li> 
 
      <li>Contact</li> 
 
     </ul> 
 
    </nav> 
 
    <div class="main-content"> 
 
     <header class="main-header"> 
 
      <h1>Trancool</h1> 
 
     </header> 
 
     <div class="primary-content"> 
 
      <ul class="song-list"> 
 
       <li class="play icons"><i id="coffee" class="fa fa-coffee fa-trancool-icons" aria-hidden="true"></i></li> 
 
       <li class="play icons"><i id="traffic" class="fa fa-car fa-trancool-icons" aria-hidden="true"></i></li> 
 
       <li class="play icons"><i id="rain" class=" fa fa-tint fa-trancool-icons" aria-hidden="true"></i></li> 
 
      </ul> 
 
      <embed id="embed_player" src="" autostart="true" > 
 
     </div> 
 
    <div> 
 
    <footer class="main-footer"> 
 
    <footer> 
 
    <script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script> 
 
</body>

Quelle

2017-02-23 18:29:23

können Sie die audio() verwenden api, um diese Dateien beim Klicken abzuspielen. Hier ist ein Beispiel.

var lis = document.getElementsByTagName('li'); 
 
for (var i = 0; i < lis.length; i++) { 
 
    lis[i].addEventListener('click',function() { 
 
    var file = this.getAttribute('data-file'), 
 
     audio = new Audio('http://skwaat.com/clips/'+file); 
 
    audio.play(); 
 
    }); 
 
}

<li data-file="theyoutubes.mp3">file1</li> 
 
<li data-file="iloveyou.mp3">file2</li>

Quelle

2017-02-23 18:41:35

Danke, das hat geklappt! Jetzt versucht das Problem, das Audio zu stoppen, indem Sie auf das gleiche Symbol klicken, wenn das Audio wiedergegeben wird. Ich habe Schwierigkeiten damit ... –

Probleme beim Anhängen eines Embed-Players richtig

Antwort

Verwandte Themen