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.

How to Use Forms in Angular 2 passing complex data objects between pages

Hi everybody!

Today we are going to explain how to pass form data object like a complex object between pages in Angular 2 or 4 or 5.

First of all, we have to declare our Data object like an injectable, on this way:

import { Injectable } from '@angular/core';

@Injectable()
export class Data {
    public storage: any;
    public constructor() { }
}

Then, we have to declare our Data object like a provider in our ngModule class file configuration, on this way:

@NgModule({
    declarations: [AppComponent, ...appComponents],
    bootstrap: [AppComponent],
    imports: [
        NativeScriptModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(appRoutes)
    ],
    providers: [Data]
})
class AppComponentModule {}

Then we can use this Data object in our pages.

First of all, we are going to define this in our first page, the origin one:

public constructor(private router: Router, private data: Data) {}

public navigationToPage2() {
   this.data.storage = {
        "firstname": "Nic",
        "lastname": "Raboy",
        "address": {
            "city": "San Francisco",
            "state": "California"
}
   }
   this.router.navigate(["page2"]);
}

And then, we will get the Data object in our second page, which receive the request of our form POST:

public constructor(private data: Data) {
    console.log(JSON.stringify(this.data.storage));
}

Only we need now is to pass our form to the this.data.storage like a JSON file on this way:

this.data.storage = {
    "requestData": JSON.stringify(requestData)
};

And the get the Data on the second page this way:

console.log(this.data.storage.requestData);

I hope you have found it useful and that you have solved your problems.

Try it and have fun!