CTM Player v0.4

A full, responsive UI and extended playback support for HTML5 <audio> built to work with the Ogg container format.

No dependencies

Works seamlessly with whatever framework you're building with.

Disconnection Recovery

Reconnects automatically after connection is reestablished

Ready to Customize

Create a custom template, add your own CSS, and even define your own custom events functions.

Usage

First of all, you need to add the JavaScript with following line:

<script src="https://breadmaker.gitlab.io/ctm-player/js/ctm-player.min.js" integrity="sha384-d/S3QZS07D+3WsUoV9FhK1wynt7U+6QNUrpU0bXPfznc0agSEFVtOcvxMnHNiXmi" crossorigin="anonymous"></script>

Then, you can convert any <audio> element by adding the data-extend="ctm-player" attribute, or by creating a new CTMPlayer() variable in your JavaScript, to fine-tune what you need.

Although the type of audio to be played is automatically detected, for a consistent behavior across browsers, we recommend adding preload="metadata" to single files and preload="none" to streams.

Basic setup

Just add the data-extend="ctm-player" attribute to any <audio> element and you're ready to go. Optionally, you can also add data-className="class1 class2" to customize how the player container looks.

<audio data-extend="ctm-player" src="https://audio-video.gnu.org/audio/Fenster-Free-Software-Song.ogg" preload="metadata"></audio>

Advanced

Initialize via JavaScript, and you will be able to define a custom template, custom container classes, a source list, and extend player functionalities with custom events listeners.

You can create listeners to all the events defined by the current standard.

HTML
JavaScript

<audio id="test" src="https://audio-video.gnu.org/audio/Fenster-Free-Software-Song.ogg" preload="metadata" controls></audio>

var player = new CTMPlayer({
    selector: "test",
    className: "my-custom-class",
    source_message: "Select a version",
    sources: [{
        name: 'Fenster',
        url: 'https://audio-video.gnu.org/audio/Fenster-Free-Software-Song.ogg',
        mode: "static"
    }, {
        name: 'Piano',
        url: 'https://www.gnu.org/music/markushaist-free-software-song.ogg',
        mode: "static"
    }, {
        name: 'Original',
        url: 'https://www.gnu.org/music/free-software-song.ogg',
        mode: "static"
    }],
    events: {
        play: function () {
            console.log("PLAY");
        }
    }
});
console.log(player);

Custom templates

You can define your own custom template for the player, adding a <script> tag of type text/x-tmpl before adding CTMPlayer's JavaScript file:

Fenster

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse modi aspernatur nihil est ex amet! Ab accusamus quisquam dolor quod ullam, nesciunt quaerat ad quis nobis repellendus et, ex voluptas!

Piano

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quidem, fugit fugiat voluptatum mollitia. Vero neque saepe placeat, in ea dolore sit corrupti laborum, molestias fugiat? Corporis hic, illum fuga?

Original

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam qui recusandae ea modi, voluptatibus optio nobis aliquam sunt cumque atque, ratione officia iusto. Alias voluptatibus quaerat nisi quas!

<audio id="fenster" src="https://audio-video.gnu.org/audio/Fenster-Free-Software-Song.ogg" preload="metadata"></audio>
<audio id="piano" src="https://www.gnu.org/music/markushaist-free-software-song.ogg" preload="metadata"></audio>
<audio id="original" src="https://www.gnu.org/music/free-software-song.ogg" preload="metadata"></audio>

<div class="mx-auto">
<div class="u5a-html5-player">
    {%#o.audio%}
</div>
<button class="ctm-player-play btn btn-light">
    <svg width="1em" height="1em" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-play fa-w-14 fa-3x"><path fill="currentColor" d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6zm-16.2 55.1l-352 208C45.6 483.9 32 476.6 32 464V47.9c0-16.3 16.4-18.4 24.1-13.8l352 208.1c10.5 6.2 10.5 21.4.1 27.6z"></path></svg>
</button>
<button class="ctm-player-pause btn btn-light" hidden>
    <svg width="1em" height="1em" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-pause fa-w-14 fa-3x"><path fill="currentColor" d="M48 479h96c26.5 0 48-21.5 48-48V79c0-26.5-21.5-48-48-48H48C21.5 31 0 52.5 0 79v352c0 26.5 21.5 48 48 48zM32 79c0-8.8 7.2-16 16-16h96c8.8 0 16 7.2 16 16v352c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V79zm272 400h96c26.5 0 48-21.5 48-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48zM288 79c0-8.8 7.2-16 16-16h96c8.8 0 16 7.2 16 16v352c0 8.8-7.2 16-16 16h-96c-8.8 0-16-7.2-16-16V79z"></path></svg>
</button>
<button class="ctm-player-stop btn btn-light" hidden>
    <svg width="1em" height="1em" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-stop fa-w-14 fa-3x"><path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm16 400c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V80c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v352z"></path></svg>
</button>
<input class="align-middle ml-1" type="range" max="1" step="0.01" value="1" oninput="{%=o.selector%}.volume=this.value;">
</div>

new CTMPlayer({
    selector: "fenster",
    className: "text-center",
    template: "custom-template",
    mode: "static"
});
new CTMPlayer({
    selector: "piano",
    className: "text-center",
    template: "custom-template",
    mode: "static"
});
new CTMPlayer({
    selector: "original",
    className: "text-center",
    template: "custom-template",
    mode: "static"
});

Contribute

You can help development by reporting bugs, request features or contribute with code in the project's repository.