betajs/betajs-media-components

<div itemscope itemtype="http://schema.org/AudioObject"
    class="{{css}}-container {{cssplayer}}-size-{{csssize}} {{iecss}}-{{ie8 ? 'ie8' : 'noie8'}} {{csstheme}}
    {{cssplayer}}-normal-view {{cssplayer}}-common-browser {{cssplayer}}-{{themecolor}}-color
    {{cssplayer}}-{{title ? 'has-title' : 'no-title'}} {{visualeffectvisible ? cssplayer + '-visual-effect-applied' : ''}}"
    ba-styles="{{widthHeightStyles}}"
>
    <canvas data-selector="audio-canvas" class="{{csstheme}}-audio-canvas" ba-on:click="{{toggle_player()}}"></canvas>
    <audio crossorigin="anonymous" tabindex="-1" class="{{css}}-audio" data-audio="audio"></audio>
    <div class="{{css}}-overlay">
        <div tabindex="-1" class="{{css}}-player-toggle-overlay" data-selector="player-toggle-overlay"
             ba-hotkey:right="{{seek(position + skipseconds)}}" ba-hotkey:left="{{seek(position - skipseconds)}}"
             ba-hotkey:alt+right="{{seek(position + skipseconds * 3)}}" ba-hotkey:alt+left="{{seek(position - skipseconds * 3)}}"
             ba-hotkey:up="{{set_volume(volume + 0.1)}}" ba-hotkey:down="{{set_volume(volume - 0.1)}}"
             ba-hotkey:space^enter="{{toggle_player()}}"
             ba-on:click="{{toggle_player()}}"
        ></div>
        <ba-{{dyncontrolbar}}
            ba-css="{{csscontrolbar || css}}"
            ba-cssplayer="{{cssplayer || css}}"
            ba-csscommon="{{csscommon || css}}"
            ba-csstheme="{{csstheme || css}}"
            ba-themecolor="{{themecolor}}"
            ba-template="{{tmplcontrolbar}}"
            ba-show="{{controlbar_active}}"
            ba-playing="{{playing}}"
            ba-playwhenvisible="{{playwhenvisible}}"
            ba-event:rerecord="rerecord"
            ba-event:submit="submit"
            ba-event:play="play"
            ba-event:pause="pause"
            ba-event:position="seek"
            ba-event:volume="set_volume"
            ba-event:tab_index_move="tab_index_move"
            ba-event:seek="seek"
            ba-event:set_volume="set_volume"
            ba-event:settings_menu="toggle_settings_menu"
            ba-tabindex="{{tabindex}}"
            ba-volume="{{volume}}"
            ba-duration="{{duration}}"
            ba-cached="{{buffered}}"
            ba-title="{{title}}"
            ba-position="{{position}}"
            ba-rerecordable="{{rerecordable}}"
            ba-submittable="{{submittable}}"
            ba-source="{{source}}"
            ba-disablepause="{{disablepause}}"
            ba-disableseeking="{{disableseeking}}"
            ba-skipseconds="{{skipseconds}}"
            ba-settingsmenubutton="{{showsettingsmenu}}"
            ba-settingsmenuactive="{{settingsmenu_active}}"
        ></ba-{{dyncontrolbar}}>

        <ba-{{dynloader}}
            ba-css="{{cssloader || css}}"
            ba-cssplayer="{{cssplayer || css}}"
            ba-csscommon="{{csscommon || css}}"
            ba-theme-color="{{themecolor}}"
            ba-template="{{tmplloader}}"
            ba-playwhenvisible="{{playwhenvisible}}"
            ba-show="{{loader_active}}"
        ></ba-{{dynloader}}>

        <ba-{{dynmessage}}
            ba-css="{{cssmessage || css}}"
            ba-cssplayer="{{cssplayer || css}}"
            ba-csscommon="{{csscommon || css}}"
            ba-theme-color="{{themecolor}}"
            ba-template="{{tmplmessage}}"
            ba-show="{{message_active}}"
            ba-message="{{message}}"
            ba-event:click="message_click"
        ></ba-{{dynmessage}}>

        <ba-{{dynsettingsmenu}}
            ba-css="{{css}}"
            ba-csstheme="{{csstheme || css}}"
            ba-show="{{settingsmenu_active}}"
            ba-template="{{tmplsettingsmenu}}"
        ></ba-{{dynsettingsmenu}}>

        <meta itemprop="caption" content="{{title}}" />
        <meta itemprop="contentUrl" content="{{source}}"/>
    </div>
</div>