Testing audios
This commit is contained in:
parent
2dc7f04fcc
commit
562b56a5a9
GPG Key ID:
A04E97D8E19A58A7
@ -6,7 +6,7 @@
|
||||
<!-- <div class="col left"></div> -->
|
||||
<div class="col center priority">
|
||||
<div class="button title">
|
||||
<h1>El agua no tiene nombre</h1>
|
||||
<h1>{{audio_title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col right"></div> -->
|
||||
@ -34,15 +34,16 @@
|
||||
</section> -->
|
||||
<!-- end space -->
|
||||
|
||||
<section id="podcasts" class="container middle podcasts" *ngFor="let n of news; let index;">
|
||||
<section id="podcasts" class="container middle podcasts" *ngFor="let n of podcasts; let index;">
|
||||
<div class="content columns">
|
||||
<div class="col center">
|
||||
<div class="button big" [ngStyle]="{transform:'translateX('+n.random+'vw)'}">
|
||||
<h1>Podcast {{n.title}}</h1>
|
||||
<div class="button big" [id]="n.name" (click)="play(n)" [ngStyle]="{transform:'translateX('+n.random+'vw)'}">
|
||||
<h1>{{n.title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- space -->
|
||||
<!-- <section class="container big">
|
||||
<div class="content columns">
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core';
|
||||
import { PlayerService } from './player.service';
|
||||
import { DOCUMENT, Location } from '@angular/common';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
@ -13,11 +14,15 @@ export class AppComponent implements OnInit {
|
||||
title = 'cear-rio';
|
||||
start:boolean = false;
|
||||
randomPos:number = 0;
|
||||
news:any[] = [{title:'1',random:0},{title:'1',random:0},{title:'1',random:0},{title:'1',random:0},{title:'1',random:0}]
|
||||
// news:any[] = [{title:'1',random:0},{title:'1',random:0},{title:'1',random:0},{title:'1',random:0},{title:'1',random:0}]
|
||||
url:string ="/assets/json/podcasts.json";
|
||||
podcasts:any = [];
|
||||
audio_title:string = "El agua no tiene nombre";
|
||||
|
||||
constructor(
|
||||
public playerService:PlayerService,
|
||||
@Inject(DOCUMENT) private document: Document
|
||||
@Inject(DOCUMENT) private document: Document,
|
||||
private http: HttpClient
|
||||
) {
|
||||
|
||||
playerService.init_app$
|
||||
@ -26,12 +31,27 @@ export class AppComponent implements OnInit {
|
||||
this.start = res;
|
||||
}
|
||||
)
|
||||
|
||||
/* subscribe to metada info */
|
||||
playerService.icy_metadata$
|
||||
.subscribe(
|
||||
(res:any) => {
|
||||
this.audio_title=res;
|
||||
}
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.news.map( (n) => {
|
||||
n.random = this.randomPos=this.randomPosition();
|
||||
})
|
||||
|
||||
|
||||
this.http.get(this.url).subscribe(res => {
|
||||
this.podcasts = res;
|
||||
// console.log(this.podcasts)
|
||||
this.podcasts.map( (n:any) => {
|
||||
n.random = this.randomPos=this.randomPosition();
|
||||
})
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
@ -47,4 +67,11 @@ export class AppComponent implements OnInit {
|
||||
element.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
|
||||
|
||||
}
|
||||
|
||||
play(p:any) {
|
||||
// console.log('play! '+p.audio);
|
||||
this.audio_title="Cargando";
|
||||
this.playerService.play(p.audio);
|
||||
this.playerService.setMetadata(p.title);
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,10 +14,10 @@
|
||||
<!-- <span *ngIf="!icy_metadata && !duration">El agua no tiene nombre</span> -->
|
||||
<span *ngIf="icy_metadata" class="player">
|
||||
<ng-container *ngIf="duration=='00:00'"></ng-container>
|
||||
<!-- <ng-container>{{icy_metadata}}</ng-container> -->
|
||||
<ng-container>{{icy_metadata}}</ng-container>
|
||||
</span>
|
||||
<span *ngIf="duration!='00:00' && currentTime"><a (click)="stop()" [ngClass]="{'play':isStop}">stop</a></span>
|
||||
<span *ngIf="currentTime && duration!='00:00'">{{currentTime}}<ng-container *ngIf="duration!='00:00'">/{{duration}}</ng-container></span>
|
||||
<span>Soinumapa.net</span>
|
||||
<!-- <span>Soinumapa.net</span> -->
|
||||
</div>
|
||||
</section>
|
||||
@ -36,7 +36,6 @@ export class HeaderComponent implements OnInit {
|
||||
.subscribe(
|
||||
(res:any) => {
|
||||
this.icy_metadata=res;
|
||||
console.log('asdf')
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
@ -99,6 +99,8 @@ export class PlayerService implements OnInit {
|
||||
this.audio.onended = () => { this.play(environment.urlStream) };
|
||||
this.audio.onprogress = () => { this.onProgress() };
|
||||
|
||||
this._icy_metadata.next("El agua no tiene nombre");
|
||||
|
||||
this.audio.oncanplay = () => {
|
||||
// init player
|
||||
this._init_app.next(true);
|
||||
@ -124,6 +126,7 @@ export class PlayerService implements OnInit {
|
||||
}
|
||||
|
||||
public getStreamMetadata() {
|
||||
|
||||
this.http.get<any[]>(environment.urlStreamMetadata)
|
||||
.subscribe( (res:any) => {
|
||||
let index
|
||||
@ -133,12 +136,18 @@ export class PlayerService implements OnInit {
|
||||
if (res['icestats']['source'][index]) {
|
||||
//console.log(res.icestats.source[index].title)
|
||||
this.audio_icy = res.icestats.source[index].title;
|
||||
this._icy_metadata.next(res.icestats.source[index].title);
|
||||
|
||||
//this._icy_metadata.next(res.icestats.source[index].title);
|
||||
this._icy_metadata.next("El agua no tiene nombre");
|
||||
|
||||
this.last_icy_metadata=res.icestats.source[index].title;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
public setMetadata(title:string) {
|
||||
this._icy_metadata.next(title);
|
||||
}
|
||||
|
||||
public podcast(p:any) {
|
||||
//console.log(p)
|
||||
@ -338,7 +347,7 @@ export class PlayerService implements OnInit {
|
||||
}
|
||||
|
||||
restart() {
|
||||
this._icy_metadata.next(true)
|
||||
this._icy_metadata.next('Cargando')
|
||||
this.play(environment.urlStream);
|
||||
|
||||
}
|
||||
|
||||
26
inc/src/assets/json/podcasts.json
Normal file
26
inc/src/assets/json/podcasts.json
Normal file
@ -0,0 +1,26 @@
|
||||
[
|
||||
{
|
||||
"name": "podcast1",
|
||||
"title": "Podcast 1",
|
||||
"audio": "https://d3uq9vzdmwnq5u.cloudfront.net/v1/variant/8e7eb371-ddd5-51b1-8879-7c99fa0874d5.mp3?session_id=5a59c020-a475-5cef-98c5-e0f05b3cacfe&ct=DOWNLOAD&episode_id=116862422&show_id=2284011&user_id=33206696&organization_id=ivoox&tenant=IVOOX×tamp=1698802776&media_type=dynamic&fallback_url=https%3A%2F%2Fd3uq9vzdmwnq5u.cloudfront.net%2Fpoximamenteescucharefugio-canalescucharefugio-ivoox116862422.mp3%3Fct%3DDOWNLOAD%26episode_id%3D116862422%26show_id%3D2284011%26user_id%3D33206696%26organization_id%3Divoox%26tenant%3DIVOOX%26timestamp%3D1698802776%26media_type%3Dstatic%26Expires%3D1698975576%26Key-Pair-Id%3DK1J2BR3INU6RYD%26Signature%3Dkc74xwxozH7Wo5rQzRwB1J2TmQ3V~tlWW8sl~mTPQnFfeQkpQoCVqbGsS4sjQM598MDoeMFCqMqNGqx4UTqwZdF7Eq397ir2JnZJb4--Qm1zIPUModg5u5jZItNHd5k-EzbptqQjxqg-3x7BbdBPwwuM5nbHhLLgYfLoSoiC6cpJaqR-6Bovm5EnB3A1iQiV4iTyW1nljvAIP~kyURhAEbLUy95qWhnCqWeZoiohP3YM8qMBXauMAMNFQAYuIogjQ4ObzNazbrjkNEik5Dq8chB2WgxxkEA4JE6qBWV6kS9LpY-QfCyrV7c4U0kNNPmTpeCED9YOC8jrHLibECf8Hw__&Expires=1698975577&Key-Pair-Id=K1J2BR3INU6RYD&Signature=IkNUujU-zkM2cqFgnrJPlxIscHvf-rHq1vz~Jyu6ypGg3h0C02mimVMRZzllV-SZ~fuwjk-p6JpK2lhLvLswMczuvFjTSgEYea71EXpJ1W9Q-gOgpjMp84SZLaMa69IqzxPLNZFA6o1kGd5F12DV8myyosCxcFy~ZDIZsJss98IN7ebusGP5aZFVaXUSC3WBbkuMow1WQeERim7iK2RSXFzYNkiV1zjV6ZLGg8mZj2Gn-RoFB4DRS1vtkVl1~MTD9XmOItmmoThsqu~sMgnrKewEyQDwms~Y3aV4ClEsWxhAZMT9g4s5jQeRwRNjhriU5fY3GBkTWmBhekHA3ERK8Q__",
|
||||
"random": 0
|
||||
},
|
||||
{
|
||||
"name": "podcast2",
|
||||
"title": "Podcast 2",
|
||||
"audio": "https://d3uq9vzdmwnq5u.cloudfront.net/v1/variant/8e7eb371-ddd5-51b1-8879-7c99fa0874d5.mp3?session_id=5a59c020-a475-5cef-98c5-e0f05b3cacfe&ct=DOWNLOAD&episode_id=116862422&show_id=2284011&user_id=33206696&organization_id=ivoox&tenant=IVOOX×tamp=1698802776&media_type=dynamic&fallback_url=https%3A%2F%2Fd3uq9vzdmwnq5u.cloudfront.net%2Fpoximamenteescucharefugio-canalescucharefugio-ivoox116862422.mp3%3Fct%3DDOWNLOAD%26episode_id%3D116862422%26show_id%3D2284011%26user_id%3D33206696%26organization_id%3Divoox%26tenant%3DIVOOX%26timestamp%3D1698802776%26media_type%3Dstatic%26Expires%3D1698975576%26Key-Pair-Id%3DK1J2BR3INU6RYD%26Signature%3Dkc74xwxozH7Wo5rQzRwB1J2TmQ3V~tlWW8sl~mTPQnFfeQkpQoCVqbGsS4sjQM598MDoeMFCqMqNGqx4UTqwZdF7Eq397ir2JnZJb4--Qm1zIPUModg5u5jZItNHd5k-EzbptqQjxqg-3x7BbdBPwwuM5nbHhLLgYfLoSoiC6cpJaqR-6Bovm5EnB3A1iQiV4iTyW1nljvAIP~kyURhAEbLUy95qWhnCqWeZoiohP3YM8qMBXauMAMNFQAYuIogjQ4ObzNazbrjkNEik5Dq8chB2WgxxkEA4JE6qBWV6kS9LpY-QfCyrV7c4U0kNNPmTpeCED9YOC8jrHLibECf8Hw__&Expires=1698975577&Key-Pair-Id=K1J2BR3INU6RYD&Signature=IkNUujU-zkM2cqFgnrJPlxIscHvf-rHq1vz~Jyu6ypGg3h0C02mimVMRZzllV-SZ~fuwjk-p6JpK2lhLvLswMczuvFjTSgEYea71EXpJ1W9Q-gOgpjMp84SZLaMa69IqzxPLNZFA6o1kGd5F12DV8myyosCxcFy~ZDIZsJss98IN7ebusGP5aZFVaXUSC3WBbkuMow1WQeERim7iK2RSXFzYNkiV1zjV6ZLGg8mZj2Gn-RoFB4DRS1vtkVl1~MTD9XmOItmmoThsqu~sMgnrKewEyQDwms~Y3aV4ClEsWxhAZMT9g4s5jQeRwRNjhriU5fY3GBkTWmBhekHA3ERK8Q__",
|
||||
"random": 0
|
||||
},
|
||||
{
|
||||
"name": "podcast3",
|
||||
"title": "Podcast 3",
|
||||
"audio": "https://d3uq9vzdmwnq5u.cloudfront.net/v1/variant/8e7eb371-ddd5-51b1-8879-7c99fa0874d5.mp3?session_id=5a59c020-a475-5cef-98c5-e0f05b3cacfe&ct=DOWNLOAD&episode_id=116862422&show_id=2284011&user_id=33206696&organization_id=ivoox&tenant=IVOOX×tamp=1698802776&media_type=dynamic&fallback_url=https%3A%2F%2Fd3uq9vzdmwnq5u.cloudfront.net%2Fpoximamenteescucharefugio-canalescucharefugio-ivoox116862422.mp3%3Fct%3DDOWNLOAD%26episode_id%3D116862422%26show_id%3D2284011%26user_id%3D33206696%26organization_id%3Divoox%26tenant%3DIVOOX%26timestamp%3D1698802776%26media_type%3Dstatic%26Expires%3D1698975576%26Key-Pair-Id%3DK1J2BR3INU6RYD%26Signature%3Dkc74xwxozH7Wo5rQzRwB1J2TmQ3V~tlWW8sl~mTPQnFfeQkpQoCVqbGsS4sjQM598MDoeMFCqMqNGqx4UTqwZdF7Eq397ir2JnZJb4--Qm1zIPUModg5u5jZItNHd5k-EzbptqQjxqg-3x7BbdBPwwuM5nbHhLLgYfLoSoiC6cpJaqR-6Bovm5EnB3A1iQiV4iTyW1nljvAIP~kyURhAEbLUy95qWhnCqWeZoiohP3YM8qMBXauMAMNFQAYuIogjQ4ObzNazbrjkNEik5Dq8chB2WgxxkEA4JE6qBWV6kS9LpY-QfCyrV7c4U0kNNPmTpeCED9YOC8jrHLibECf8Hw__&Expires=1698975577&Key-Pair-Id=K1J2BR3INU6RYD&Signature=IkNUujU-zkM2cqFgnrJPlxIscHvf-rHq1vz~Jyu6ypGg3h0C02mimVMRZzllV-SZ~fuwjk-p6JpK2lhLvLswMczuvFjTSgEYea71EXpJ1W9Q-gOgpjMp84SZLaMa69IqzxPLNZFA6o1kGd5F12DV8myyosCxcFy~ZDIZsJss98IN7ebusGP5aZFVaXUSC3WBbkuMow1WQeERim7iK2RSXFzYNkiV1zjV6ZLGg8mZj2Gn-RoFB4DRS1vtkVl1~MTD9XmOItmmoThsqu~sMgnrKewEyQDwms~Y3aV4ClEsWxhAZMT9g4s5jQeRwRNjhriU5fY3GBkTWmBhekHA3ERK8Q__",
|
||||
"random": 0
|
||||
},
|
||||
{
|
||||
"name": "podcast4",
|
||||
"title": "Podcast 4",
|
||||
"audio": "https://d3uq9vzdmwnq5u.cloudfront.net/v1/variant/8e7eb371-ddd5-51b1-8879-7c99fa0874d5.mp3?session_id=5a59c020-a475-5cef-98c5-e0f05b3cacfe&ct=DOWNLOAD&episode_id=116862422&show_id=2284011&user_id=33206696&organization_id=ivoox&tenant=IVOOX×tamp=1698802776&media_type=dynamic&fallback_url=https%3A%2F%2Fd3uq9vzdmwnq5u.cloudfront.net%2Fpoximamenteescucharefugio-canalescucharefugio-ivoox116862422.mp3%3Fct%3DDOWNLOAD%26episode_id%3D116862422%26show_id%3D2284011%26user_id%3D33206696%26organization_id%3Divoox%26tenant%3DIVOOX%26timestamp%3D1698802776%26media_type%3Dstatic%26Expires%3D1698975576%26Key-Pair-Id%3DK1J2BR3INU6RYD%26Signature%3Dkc74xwxozH7Wo5rQzRwB1J2TmQ3V~tlWW8sl~mTPQnFfeQkpQoCVqbGsS4sjQM598MDoeMFCqMqNGqx4UTqwZdF7Eq397ir2JnZJb4--Qm1zIPUModg5u5jZItNHd5k-EzbptqQjxqg-3x7BbdBPwwuM5nbHhLLgYfLoSoiC6cpJaqR-6Bovm5EnB3A1iQiV4iTyW1nljvAIP~kyURhAEbLUy95qWhnCqWeZoiohP3YM8qMBXauMAMNFQAYuIogjQ4ObzNazbrjkNEik5Dq8chB2WgxxkEA4JE6qBWV6kS9LpY-QfCyrV7c4U0kNNPmTpeCED9YOC8jrHLibECf8Hw__&Expires=1698975577&Key-Pair-Id=K1J2BR3INU6RYD&Signature=IkNUujU-zkM2cqFgnrJPlxIscHvf-rHq1vz~Jyu6ypGg3h0C02mimVMRZzllV-SZ~fuwjk-p6JpK2lhLvLswMczuvFjTSgEYea71EXpJ1W9Q-gOgpjMp84SZLaMa69IqzxPLNZFA6o1kGd5F12DV8myyosCxcFy~ZDIZsJss98IN7ebusGP5aZFVaXUSC3WBbkuMow1WQeERim7iK2RSXFzYNkiV1zjV6ZLGg8mZj2Gn-RoFB4DRS1vtkVl1~MTD9XmOItmmoThsqu~sMgnrKewEyQDwms~Y3aV4ClEsWxhAZMT9g4s5jQeRwRNjhriU5fY3GBkTWmBhekHA3ERK8Q__",
|
||||
"random": 0
|
||||
}
|
||||
]
|
||||
Loading…
Reference in New Issue
Block a user