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

时间:2015-04-24 12:19:16

标签: javascript

我已使用embed标记制作播放列表。每次单击列表的音频时都会生成播放器。当您收听所选文件然后按列表中的其他文件时,播放器将被删除并显示新播放器。

然而,相反,我想只显示一个玩家,并重复使用它。

            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) {
                 if (!audio) {
                        audio = document.createElement('embed');
                        audio.setAttribute('id', 'audio');
                        audio.height = "50";
                        audio.width = "400";
                        audio.controls = false;

                        bottom.insertBefore(audio, re_txt);
                      }             
            }

1 个答案:

答案 0 :(得分:0)

每次点击其中一个播放列表时,您都会创建一个新的音频播放器,而不是重复使用旧播放器。

而不是

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

  bottom.insertBefore(audio, re_txt);
  ...
}

可能会重复使用音频播放器

var audio;

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

    bottom.insertBefore(audio, re_txt);
  }
  ...
}