<div id=“{{id}}” class=“ma-container”>

<audio class="ma-audio" src={{ audioSrc }}>
    <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_path | append: '/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_path | append: '/assets/stop.svg'}}"  alt="play-button">
    </div>
    <div class="button-loop">
        <img src= "{{assets_path | append: '/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_path | append: '/assets/volume-up.svg'}}"  alt="play-button">
    </div>
    <div class="volume-down">
        <img src= "{{ assets_path | append: '/assets/volume-down.svg'}}" alt="play-button">
    </div>
</div>

</div> <link rel=“stylesheet” href= “{{assets_path | append: '/main.css' }}”> <script src= “{{assets_path | append: '/miniAudio.js'}}”></script> <script>

new MiniAudio('{{id}}', '{{ assets_path }}');

</script>