埋め込みプレーヤーを正しく追加する際の問題

私は火、コーヒーカップ、車などのアイコンを含むウェブページを持っています。ここでの主なアイデアは、ユーザーがこれらのアイコンをクリックすると、どのアイコンがクリックされたかに応じて特定のアンビエントサウンドを再生することです。ここで問題となるのは、自分が望むように、順不同のリストにプレーヤーを正しく埋め込むことができないということです。埋め込みプレーヤーを正しく追加する際の問題

たとえば、アイコンをクリックした瞬間に、対応するトラフィックアイコンがクリックされていなくても、交通環境音が再生されています。私は何が間違っているのか正確にはわかりません。どんな助けでも大歓迎です。

<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(); 
     } 
    } 

});

出典

2017-02-23 Kevin Dunn

あなたのJSコードから埋め込みを削除し、あなたのhtmlに1時間をかけ、IDにアイコンクラスを変更して、あなたがaudio()を使用することができ、この

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>

出典

2017-02-23 18:29:23

を試してみてくださいapiをクリックしてこれらのファイルを再生します。ここに例があります。

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>

出典

2017-02-23 18:41:35

これは働いていた、ありがとう！今問題は、オーディオが再生されている場合、同じアイコンをクリックしてオーディオを停止しようとしていることです。私はこの問題を抱えています... –

埋め込みプレーヤーを正しく追加する際の問題

答えて

関連する問題