DEV Community


Posted on

Write simplest an audio player in browser.

I play with <audio> tag to play mp3 file handy and portably.

This simplest audio player has no special feature, just plays an audio file!

You can use it like below.

<audio src="/yourfile.mp3" controls></audio>


...oh, This doesn't looks convenient so much.

At the least, I want to choose a file. HOW?

<audio> detects the file to play from src attribute.
So, All I need are preparing file choose and creating <audio> DOM.

Maybe it needs a little state managing.

  1. No file to play: Only <input type="file"> is enabled
  2. There is a file to play: <audio> is enabled

I decided to use mithriljs to control states because this is declarative, easy and compile free.

Implementing looks like below. (details are omitted.)

// The global model to manage state.
const model = {
  fileObj: null,
  blobUrl: null,

function handleFile(e) {
  // create blob URL.
  model.fileObj =[0];
  model.blobUrl = URL.createObjectURL(model.fileObj);

// The component to choose file.
const itemComponent = {
  view() {
    return m('input', {type: "file", onclick: handleFile });

// The component rendering <audio> DOM.
const audioComponent = {
  view() {
    return m('audio', { controls: true, src: model.blobUrl });

// Entrypoint
const app = {
  view() {
    // This draws <audio> DOM after chosen file. 
    return m(model.fileObj ? audioComponent : itemComponent);

Actual implementing has file drop and restore playing posigion, but essentials are just these. (please see:

Top comments (0)