viernes, 9 de marzo de 2018

How to add music to your Website in Javascript

Hi there!

Today I want to talk about "how to add music to your website with the Html Web API".

We are going to use the Html Audio object instead of other proposed solutions on the net, like use Howler.js or other audio frameworks.

For use this solutions, you need to use Javascript or other language compile Javascript, like Angular or Ionic.

Declaration of variables:

loaded: boolean = false;
playing: boolean = false;
sound: any;

First, create the Audio object and define the default properties:

this.sound = new Audio();
this.sound.autoplay = false;
this.sound.preload = 'auto';
this.sound.autobuffer = true;


Before you define the events, you must declare a local variable pointing to this:

let parent = this;

Then, you have to define the audio event listeners:

this.sound.addEventListener('loadeddata', function() {
console.log("music loaded");
parent.loaded = true;
parent.playTrack();
}, false);


this.sound.addEventListener('play', function() {
console.log("music play");
parent.playing = true;
}, false);


this.sound.addEventListener('pause', function() {
console.log("music pause");
parent.playing = false;
}, false);

And for last you need to define the music src and load it:

this.sound.src = './assets/audio/Rhodesia_MkII.mp3';
this.sound.load();

Now, you need the actions and functions called from the html:

isLoadedTrack() {
return this.loaded;
}

isPlayingTrack() {
return this.playing;
}

playTrack() {
if(this.sound) {
this.sound.play();
}
}

pauseTrack() {
if(this.sound) {
this.sound.pause();
}
}

And the content of the html will look like this:

<div *ngIf="isLoadedTrack()">
      <div class="music" *ngIf="!isPlayingTrack()">
          <button (click)="playTrack()">
<i class="fa fa-play"></i> <i class="fa fa-music"></i>
</button>
      </div>
      <div class="music" *ngIf="isPlayingTrack()">
          <button (click)="pauseTrack()">
<i class="fa fa-pause"></i> <i class="fa fa-music"></i>
</button>
      </div>
</div>

And the result will show those two state:



I hope you find the talk interesting!

You can see the Production use of the Component on https://davidmartinezros.com
And you can take a look to the Portfolio repository: https://github.com/davidmartinezros/portfolio

Any doubt, ask me and I will answer as soon as possible.