Question

我有一个带有一些图标的网页，例如火，咖啡杯，汽车。这里的主要想法是，当用户点击这些图标时，我希望根据点击的图标播放特定的环境声音。这里的问题是我无法按照我想要的方式将玩家正确地嵌入到无序列表中。

例如，在点击任何图标时，即使没有点击相应的交通图标，也会播放交通环境声音。我不确定我做错了什么。任何帮助将不胜感激。

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

});

Answer 1

您可以使用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>

正确添加嵌入播放器的问题

1 个答案: