Test: Audio Player using Element audio HTML

This commit is contained in:
Luca 2023-10-31 19:41:11 +01:00
parent 20ff9d0477
commit 0f7068f175
Signed by: lrullo
GPG Key ID: A04E97D8E19A58A7
5 changed files with 62 additions and 26 deletions

View File

@ -1,6 +1,8 @@
## ANGULAR THEME BUILD
FROM node:16-alpine as angular FROM node:16-alpine as angular
WORKDIR app WORKDIR angular
COPY inc ./ COPY inc ./
@ -8,17 +10,6 @@ RUN npm install -g @angular/cli
RUN ng config -g cli.warnings.versionMismatch false RUN ng config -g cli.warnings.versionMismatch false
RUN npm install RUN npm install
RUN ng build RUN npm run build:ssr --prod --proxy-config
# nginx base image CMD npm run serve:ssr -c production --proxy-config
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;"]

24
Dockerfile.nginx Normal file
View File

@ -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;"]

View File

@ -24,13 +24,13 @@
</section> </section>
<!-- space --> <!-- space -->
<section class="container big"> <!-- <section class="container big">
<div class="content columns"> <div class="content columns">
<div class="col left"></div> <div class="col left"></div>
<div class="col center"></div> <div class="col center"></div>
<div class="col right"></div> <div class="col right"></div>
</div> </div>
</section> </section> -->
<!-- end space --> <!-- end space -->
<section class="container middle" *ngFor="let n of news; let index;"> <section class="container middle" *ngFor="let n of news; let index;">
@ -56,7 +56,6 @@
<div class="content columns"> <div class="content columns">
<div class="col left"></div> <div class="col left"></div>
<div class="col center intro"> <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>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>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> <p>El guion ha sido escrito colaborativamente junto a las mismas personas que han puesto su voz en la narración.</p>

View File

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

View File

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