正確添加嵌入式播放器的問題

我有一個網頁，有一些圖標，如火，咖啡杯，汽車。這裏的主要想法是，當用戶點擊這些圖標時，我想根據點擊哪個圖標播放特定的環境聲音。這裏的問題是，我無法按照自己想要的方式將播放器正確嵌入無序列表中。正確添加嵌入式播放器的問題

例如，在點擊任何圖標時，即使相應的流量圖標從未被點擊過，交通環境聲音仍在播放。我不確定我做錯了什麼。任何幫助將不勝感激。

<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，更改圖標類ID，然後試試這個

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

可以使用audio() 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

謝謝你，這個工作！現在，問題是如果音頻正在播放，則通過單擊相同的圖標來嘗試停止音頻。我遇到了困難...... –

正確添加嵌入式播放器的問題

回答

相關問題