<!DOCTYPE html> <html>

<head>

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>h5audio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />

</head>

<body>

<div>Hello, here's the generated content of jekyll-miniaudio.</div>
<div id="ma-container" class="ma-container">
    <audio class="ma-audio" src="demo.mp3">
        <p>Your brower is too old, it does not support html5 audio play.</p>
    </audio>
    <div class="ma-player">
        <div class="button-play">
            <img src="assets/play.svg" alt="play-button">
        </div>
        <div class="progress-bar">
            <div class="bar">
                <div class="brick">
                </div>
            </div>
        </div>
        <div class="progress-panel">
            <span class="current-time">00:00</span>
            <span class="duration-time" style="display: none">00:00</span>
        </div>
        <div class="button-stop">
            <img src="assets/stop.svg" alt="play-button">
        </div>
        <div class="button-loop">
            <img src="assets/loop.svg" alt="play-button">
        </div>
        <div class="info-panel">
            <div><span class="title">Title</span></div>
        </div>
        <div class="volume-up">
            <img src="assets/volume-up.svg" alt="play-button">
        </div>
        <div class="volume-down">
            <img src="assets/volume-down.svg" alt="play-button">
        </div>
    </div>
</div>
<script src="miniAudio.js"></script>
<script>
    var h5Audio = new MiniAudio('ma-container', '');
</script>

</body>

</html>