javascript - 此音频播放器在某些浏览器中存在不兼容问题

Question

我是这个网页的新手，我正在集成该网页，我想帮助我处理从页面中获取的作者的这些代码。这是一个音频播放器，在 Mozilla Firefox 中运行良好，但在 Google Chrome 中，不提供音频，而且 CSS 样式在 Google Chrome 中运行得不太好，我想它是在 JavaScript 的编码中，并且也是界面“可能”是不稳定的，因为它与完美的 Mozilla 不一样。

我还想在“响应式”中进行此编程，还有一个歌曲列表，这将是播放、进度条和扬声器上方的发光文本，但有一个隐藏的 slider ，单击即可打开，但我不知道编码是否可以改进......或者用 CSS 或 JavaScript 创建一个新的编码。

代码如下:

JavaScript:

  var audio = new Audio();
  audio.src = 'Put the mp3 audio path here';
  audio.controls = true;
  audio.loop = false;
  audio.autoplay = true;

  var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
  window.addEventListener("load", initMp3Player, false);

  function initMp3Player(){
  document.getElementById('audio_box').appendChild(audio);
  context = new AudioContext();
  analyser = context.createAnalyser();
  canvas = document.getElementById('analyser_render');
  /*canvas = _('analyser_render');*/
  ctx = canvas.getContext('2d');

  source = context.createMediaElementSource(audio);
  source.connect(analyser);
  analyser.connect(context.destination);
  frameLooper();
  }

function frameLooper(){
    window.requestAnimationFrame(frameLooper);
    fbc_array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(fbc_array);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#FFF';
    bars = 100;
    for (var i = 0; i < bars; i++){
        bar_x = i * 3;
        bar_width = 2;
        bar_height = -(fbc_array[i] / 5);

        ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
    }
 }

HTML:

<span class="cajamp3">
 <div id="mp3_player">
            <div id="audio_box"></div>
            <canvas id="analyser_render"></canvas>
 </div>  
</span>

CSS:

{
    margin: 0;
    padding: 0;
}

div#mp3_player{ 
    float: left;        
    width: 290px;
    height: 65px;
    background: #000;
    padding: 5px;       
}

div#mp3_player > div > audio{
    width: 270px;
    background: #000;
    float: left;
}

div#mp3_player > canvas{
    width: 270px;
    height: 20px;
    background: #002D3C;
    float: left;
}

Answer 1

好的，问题出在 JavaScript 中，因为在“source = context.createMediaElementSource (audio);”部分，对于 Firefox，它工作得非常好，而不是运行 Chrome 音频，但时间栏仍然存在但是，如果我将其更改为“source = context.MediaElementSource (audio);”，则自动与 CHROME 和 FIREFOX 一样工作正常，即使它工作:“FUNCTION FRAMELOOPER”，FIREFOX 浏览器中的频率级别不起作用，并且我不知道为什么。

请原谅我忘记告诉你错误在哪里，而且由于我是新人，我不知道如何进行测试。

但我想做“响应式”，我尝试用 DIV 来实现，并且在其中将执行“响应式”，但仍然不起作用。

谢谢，希望您能及时回复。