我是这个网页的新手，我正在整合这个网页，我想帮助我从这些网页中取得的作者代码。这是一款音频播放器，发生的事情在Mozilla Firefox中效果不错，但在谷歌浏览器中，并没有给出音频，而且CSS样式在谷歌浏览器中也不太好，我想这是JavaScript编码，界面“可能”是不稳定的，因为它和Mozilla完全不一样。这个音频播放器的一些浏览器中的不兼容问题

此外，我希望在“响应式”和一系列歌曲中进行编程，这些歌曲将在播放，进度条和扬声器上方显示一个发光文字，但它有一个隐藏滑块，我不知道如果编码可以改进....或者在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; 
}

来源

2017-01-17 kirous

'谷歌浏览器中，不提供音频“ - 在Chrum中发生了什么**？你可以在** developer **工具控制台中得到任何错误吗？在JS，HTML或CSS中没有任何明显的错误，并且没有什么在Chrum和Firefox中不能同样工作 –

好了，问题是在JavaScript中，因为在部分说“source = context.creat eMediaElementSource（音频）;“，对于Firefox来说，它的工作原理非常奇妙，而不是运行Chrome音频，但时间栏仍然是但是如果我将其更改为”source = context.MediaElementSource（audio）;“ CHROME和FIREFOX工作正常，即使它工作：“FUNCTION FRAMELOOPER”，FIREFOX浏览器的频率级别不起作用，我不知道为什么。

请原谅我忘记告诉你错误在哪里，而且因为我是新人，所以我不知道如何做测试。

但我想作为“响应”，我试图做一个DIV，它内部将执行“响应”，但仍然无法正常工作。

谢谢，我希望你的回复。

来源

2017-01-19 23:17:46 kirous

这个音频播放器的一些浏览器中的不兼容问题

的JavaScript：

HTML：

CSS：

回答

相关问题