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 search your web on google.com

Hi,

Like all people know, google have a domain for region. For example, for searching your web on google in Spain you have to use https://www.google.es, for searching your web in USA you have to use https://www.google.com.

But we have a problem using https://www.google.com. Automatically, you will be redirect to your region domain. For example, if you are in Spain, you will be redirect to https://www.google.es.

For resolving this problem, you can access to the url https://www.google.com/ncr and you could use the USA domain and you can investigate your SEO in America and how are you publishing there.

For example, acceding to https://www.google.com/ncr and searching the words david angular java full stack you will see on the first position of the google link list the domain https://davidmartinezros.com/dashboard?lang=en, which is my english web.

And if you search on https://www.google.es and searchs the words david angular java full stack you will see on the first position the domain https://davidmartinezros.com/dashboard?lang=es, which is my spanish web.

If you have any question, ask me on the comments.

How to define repository ownership in JPA with Spring Security?

Hi, everybody!

Today I'm going to explain how to define repository ownership in JPA with Spring Security.

First of all, we are going to explain what is a repository: is an interface of JPA that provide the access to a database table modeled with hibernate.

In this interface, you can define any JPA or native query and you can change the behaivour of any call.

For example, you can have this:

@Repository
public interface MyHibernateModelClassRepository extends JpaRepository<MyHibernateModelClass, Long> {

}

With this implementation, you can call any CRUD method.

Now, I'm going to explain how to define ownership of this JPA interface:

With the same example, you can have this:

@Repository
public interface MyHibernateModelClassRepository extends JpaRepository<MyHibernateModelClass, Long> {

    @PreAuthorize("#entity == null || #entity.id == principal.id")
    @Override
    <S extends MyHibernateModelClass> S save(S entity);

    @PreFilter("filterObject == null || filterObject.id== principal.id")
    @Override
    <S extends MyHibernateModelClass> List<S> save(Iterable<S> entities);

    @PostAuthorize("returnObject.id == principal.id")
    @Override
    MyHibernateModelClass findOne(Long integer);

    @PostFilter("filterObject.id == principal.id")
    @Override
    List<MyHibernateModelClass> findAll();
    
}

With this call, you implemented a JPA interface with ownership, where the CRUD calls can only be used by the user logged in the application is the same of the attribute id in the database table modeled with Hibernate MyHibernateModelClass.

I'm going to provide another example, which use a method of the hibernate entity that response with a boolean if the CRUD method can be use by this user.

Here is the next example:

(hibernate entity have this method):
...
public boolean hasMetadadaWithId(Long id) {
return (metadades.getId().equals(id));
}
...

And the JPA repository shows like this:

@Repository
public interface MyHibernateModelClassRepository extends JpaRepository<MyHibernateModelClass, Long> {

@PreAuthorize("#entity == null || #entity.hasMetadadaWithId(principal.id)")
    @Override
    <S extends MyHibernateModelClass> S save(S entity);

    @PreFilter("filterObject == null || filterObject.hasMetadadaWithId(principal.id)")
    @Override
    <S extends MyHibernateModelClass> List<S> save(Iterable<S> entities);
    
    @PostAuthorize("returnObject.hasMetadadaWithId(principal.id)")
    @Override
    MyHibernateModelClassfindOne(Long integer);

    @PostFilter("filterObject.hasMetadadaWithId(principal.id)")
    @Override
    List<MyHibernateModelClass> findAll();
    
}

And that's all!

For any question, ask me!

Try it and have fun!