wavesurfer.js/example/angular-material/md-player-audio.partial.html

Interactive navigable audio visualization using Web Audio and Canvas

<md-card layout="column">
    <div ng-transclude=""></div>
    <md-toolbar class="md-toolbar-sm">
        <div class="text-center" class="md-toolbar-tools">
            <h2 style="font-size: 24px;">Audio Player</h2>
        </div>
    </md-toolbar>
    <md-list layout="column">
        <md-virtual-repeat-container style="height: 250px">
            <md-list-item md-virtual-repeat="track in audio.tracks" md-start-index="audio.selectedIndex"
                          ng-click="audio.setTrack($index, true)">
                <p>
                    {{$index+1}}. {{track.title}}
                </p>

                <div class="text-right md-secondary">
                    {{track.duration | mdWavesurferTimeFormat}}
                </div>
                <md-divider ng-if="$index < audio.tracks.length-1"></md-divider>
            </md-list-item>
        </md-virtual-repeat-container>
    </md-list>
    <md-wavesurfer-player
            url="{{audio.currentTrack.src}}#{{audio.selectedIndex}}"
            title="{{audio.selectedIndex+1}}. {{audio.currentTrack.title}}"
            extra-buttons="audio.extraButtons"
            properties="audio.playerProperties"
    >
    </md-wavesurfer-player>
</md-card>