Test: Audio Player using Element audio HTML

Dockerfile

@@ -1,6 +1,8 @@
+## ANGULAR THEME BUILD
+
 FROM node:16-alpine as angular
 
-WORKDIR app
+WORKDIR angular
 
 COPY inc ./
 
@@ -8,17 +10,6 @@ RUN npm install -g @angular/cli
 RUN ng config -g cli.warnings.versionMismatch false
 RUN npm install
 
-RUN ng build
+RUN npm run build:ssr --prod   --proxy-config
 
-# nginx base image
-FROM nginx:1.16.0-alpine
-
-RUN chmod 777 /var/cache/nginx /var/run
-
-# copy static contents of project to nginx html
-RUN rm -rf /usr/share/nginx/html/*
-COPY --from=angular /app/dist/cear-rio/browser /usr/share/nginx/html
-
-EXPOSE 8080
-
-CMD ["nginx", "-g", "daemon off;"]
+CMD npm run serve:ssr -c production  --proxy-config

Dockerfile.nginx

@@ -0,0 +1,24 @@
+FROM node:16-alpine as angular
+
+WORKDIR app
+
+COPY inc ./
+
+RUN npm install -g @angular/cli
+RUN ng config -g cli.warnings.versionMismatch false
+RUN npm install
+
+RUN ng build
+
+# nginx base image
+FROM nginx:1.16.0-alpine
+
+RUN chmod 777 /var/cache/nginx /var/run
+
+# copy static contents of project to nginx html
+RUN rm -rf /usr/share/nginx/html/*
+COPY --from=angular /app/dist/cear-rio/browser /usr/share/nginx/html
+
+EXPOSE 8080
+
+CMD ["nginx", "-g", "daemon off;"]

inc/src/app/app.component.html

@@ -24,13 +24,13 @@
 </section>
 
 <!-- space -->
-<section class="container big">
+<!-- <section class="container big">
   <div class="content columns">
     <div class="col left"></div>
     <div class="col center"></div>
     <div class="col right"></div>
   </div>
-</section>
+</section> -->
 <!-- end space -->
 
 <section class="container middle" *ngFor="let n of news; let index;">
@@ -56,7 +56,6 @@
   <div class="content columns">
     <div class="col left"></div>
     <div class="col center intro">
-      <p>Gracias a las personas que han hecho posible la elaboración de este podcast desde la delegación de CEAR Navarra.</p>
       <p>Este programa contó con la colaboración de <a href="https://www.audio-lab.org">Audio Laborategia elkartea</a> para la realización de la pieza sonora a través de talleres de escucha y de creación colectiva.</p>
       <p>En la realización sonora: Xabier Erkizia, Luca Rullo, Iñigo Telletxea y Juan Arnal.</p>
       <p>El guion ha sido escrito colaborativamente junto a las mismas personas que han puesto su voz en la narración.</p>

inc/src/app/app.component.ts

@@ -6,7 +6,9 @@ import { PlayerService } from './player.service';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit{
+
+export class AppComponent implements OnInit {
+
   title = 'cear-rio';
   start:boolean = false;
   randomPos:number = 0;
@@ -34,9 +36,8 @@ export class AppComponent implements OnInit{
 
   randomPosition():number {
     let seed = Math.random();
-    let max=100
-    let min=-100
-    // return (Math.floor(seed * 100)*(-1*Math.floor(seed*2)));
+    let max=200
+    let min=-200
     return Math.floor(Math.random() * (max - min + 1) + min)
   }
 }

inc/src/app/player.service.ts

@@ -1,4 +1,5 @@
-import { Injectable, OnInit } from '@angular/core';
+import { ElementRef, Injectable, OnInit, Inject } from '@angular/core';
+import { DOCUMENT, Location } from '@angular/common';
 import { HttpClient, HttpParams, HttpHeaders, HttpErrorResponse} from '@angular/common/http';
 import { Subject,Observable }    from 'rxjs';
 import {environment} from '../environments/environment';
@@ -21,6 +22,8 @@ export class PlayerService implements OnInit {
   audio_buffered:number=-1;
   public audio_icy="loading data..."
 
+  audio_player:HTMLAudioElement = this.document.createElement('audio');
+
   metadataTimeout?:any;
 
   public player_minimized:boolean = false;
@@ -29,6 +32,11 @@ export class PlayerService implements OnInit {
   private _init_app = new Subject();
   init_app$ = this._init_app.asObservable();
 
+  /* Player Created */
+  private _player_element = new Subject();
+  player_element$ = this._player_element.asObservable();
+
+
   /* Metadata */
   private _icy_metadata = new Subject();
   icy_metadata$ = this._icy_metadata.asObservable();
@@ -48,11 +56,15 @@ export class PlayerService implements OnInit {
 
   constructor(
     public http:HttpClient,
+    @Inject(DOCUMENT) private document: Document
   ) {
-    this.audio = new Audio();
+    // this.audio = new Audio(); // not working on SSR
+    this.audio = this.audio_player;
+    
     this.audio_paused = true; //audio not playing
     this._audio_is_playing.next(this.audio_paused);
     this.audio_stopped = true;
+
   }
 
   ngOnInit() {
@@ -67,17 +79,26 @@ export class PlayerService implements OnInit {
     this.audio.onloadedmetadata = this.handleLoadMetadata.bind(this);
   }
 
+  setPlayerElement(player:ElementRef) {
+    // this.audio_player = player.nativeElement;
+    // console.log(this.audio_player)
+    // let a = document.createElement('audio');
+    // console.log(a)
+  }
+
   load(url:string) {
 
     this.audio.src = url;
+    this.audio_player.src = url;
+
     this.audio.load();
+    this.audio_player.load();
+
     this.audio.ontimeupdate = this.handleTimeUpdate.bind(this);
     this.audio.onloadstart = () => {this.audio_buffered = 0;};
     this.audio.onended = () => { this.play(environment.urlStream) };
     this.audio.onprogress = () => { this.onProgress() };
     
-    console.log(environment.urlStream)
-
     this.audio.oncanplay = () => {
       // init player
       this._init_app.next(true);