Question

我想制作一个音频播放列表，分析器固定在顶部，下方有一个播放列表。

我想为我要添加的每首歌创建一个播放器，并将分析器固定在顶部，如下所示：http://www.beatstars.com/player/?storeId=12085&trackId=381518。

这是我到目前为止所做的：

HTML：

<!doctype html>
<html>
    <head>
        <title>Analyser</title>
        <link rel="stylesheet" type="text/css" media="all" href="css/player.css">
    </head>
    <body>
        <div id="mp3_player">
            <div id="audio_box"></div></div>
            <canvas id="analyser_render"></canvas>
            <script type="text/javascript" src="js/file.js"></script>
    </body>
</html>

脚本

// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
audio.src = 'media/fine line.mp3';
audio.controls = true;
audio.loop = true;
audio.autoplay = false;
// Establish all variables that your Analyser will use`<br>
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;   
// Initialize the MP3 player after the page loads all of its HTML into the window
window.addEventListener("load", initMp3Player, false);

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

    // Re-route audio playback into the processing graph of the AudioContext
    source = context.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(context.destination);
    frameLooper();
}

// frameLooper() animates any style of graphics you wish to the audio frequency
// Looping at the default frame rate that the browser provides(approx. 60 FPS)
function frameLooper(){
    window.requestAnimationFrame(frameLooper);
    fbc_array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(fbc_array);   
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
    ctx.fillStyle = '#00CCFF'; // Color of the bars
    bars = 100;

    for (var i = 0; i < bars; i++) {
        bar_x = i * 3;
        bar_width = 2;
        bar_height = -(fbc_array[i] / 2);
        //  fillRect( x, y, width, height )
        // Explanation of the parameters below
        ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
    }
}

CSS

div#mp3_player {
    position: absolute;
    top: 200px;
    left: 0px;
    width:100%;
    height:28px;
    background:#000;
    z-index: 9999;
}

div#mp3_player > div > audio {
    width:100%;
    background:#000;
    float:center;
}

canvas {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 200px;
    margin: 0 auto;
    background: #4c4e5a rgba(200, 54, 54, 0.5);
    background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
    background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
    background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
    background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
    background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    z-index: 100;
}

如何使用音频播放列表制作固定分析器/展示台？

0 个答案: