javascript - 我只想创建一个音频播放器实例

Question

我使用嵌入标签来制作播放列表。每次单击列表中的音频时都会生成播放器。当您收听选定的文件，然后按列表中的其他文件之一时，播放器将被消除，并出现一个新的播放器。

但是，我只想显示一名玩家并重复使用它。也许是因为我不断出现都是因为bottom.insertBefore。我想做一个单人游戏。

if (agent.indexOf("chrome") != -1 || agent.indexOf("opera") != -1) {                            
            var audio = document.createElement('audio');
            audio.setAttribute('id', 'audio'); 
            audio.type = 'audio/wav';
            audio.src = files[current];
            audio.autoplay = true;

            a.setAttribute('onclick', 'playlistClick(0)');
            a2.setAttribute('onclick', 'playlistClick(1)');
            a3.setAttribute('onclick', 'playlistClick(2)');

            bottom.appendChild(pop_tit01);
            bottom.appendChild(audio);
            bottom.appendChild(mp3_player);
            bottom.appendChild(re_txt);

        } else {                                        
            var pop_tit01 = document.createElement('dl');
            pop_tit01.setAttribute('class', 'pop_tit01');

            var dt = document.createElement('dt');

            var img = document.createElement('img');
            img.setAttribute('src', 'images/img/sample_img05.jpg');

            var dd = document.createElement('dd');

            var strong = document.createElement('strong');
            var str = document.createTextNode("default");
            var strdd = document.createTextNode("click list");

            //top
            dt.appendChild(img);
            strong.appendChild(str);
            dd.appendChild(strong); 
            dd.appendChild(strdd);

            //top image             
            pop_tit01.appendChild(dt);
            pop_tit01.appendChild(dd);  

            bottom.appendChild(pop_tit01);

            a.setAttribute('onclick', 'playlistclick(0)');
            a2.setAttribute('onclick', 'playlistclick(1)');
            a3.setAttribute('onclick', 'playlistclick(2)');

            //bottom.appendChild(audio);
            bottom.appendChild(re_txt);
        }

        function playlistclick(src) {
                            var audio = document.createElement('embed');
                            audio.setAttribute('id', 'audio');
                            audio.height = "50";
                            audio.width = "400";
                            audio.controls = false;
                            audio.type = "audio/wav";

                            bottom.insertBefore(audio, re_txt);

                            current = src;
                            audio.src = files[current]; 
        }

Answer 1

您应该在每次输入函数时盲目创建这些元素之前检查这些元素是否已经存在。

if (agent.indexOf("chrome") != -1 || agent.indexOf("opera") != -1) { 
    // Before you start, check for an element with an "audio" ID.
    // Something similar can be added everywhere else.
    if (document.findElementById('audio')) {
        return;
    }

    var audio = document.createElement('audio');
    audio.setAttribute('id', 'audio'); 
    // ....
}