<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>