Получение кнопки Play для воспроизведения ссылки на поток

Question

Только что начал использовать Ioni c 4 и Angular, так что совсем новый новичок:)

Я купил шаблон пользовательского интерфейса в каньоне кода, но так и не понял, что мне нужно кодировать музыкальную часть c этого Во всяком случае я искал, чтобы получить поток воспроизведения, но не удалось. Я нашел пост, в котором говорилось, что нужно использовать HTML5 код для потоковой передачи музыки c.

Когда я нажимаю Play, музыка c никогда не играет. Куда я иду не так? Мой player.page.ts выглядит так:

import { Component, OnInit, Input } from '@angular/core';
import { ModalController } from '@ionic/angular';

@Component({
    selector: 'app-player',
    templateUrl: './player.page.html',
    styleUrls: ['./player.page.scss'],

})
export class PlayerPage implements OnInit {

    @Input() data: any;

    stream: any = null;
    valueVolume = 50;


    constructor( public modalController: ModalController) { }
    audio: any;

    ngOnInit() {
        this.audio = new Audio();
        this.audio.src = 'http://tbvr.noip.me:8000/';
        this.audio.load();
    }

    clickButtonMusic() {
    }

    closeModal() {
        this.modalController.dismiss();
    }

    playAudio() {
        this.audio.play();
        this.audio.loop = false;
    }

    stopAudio() {
        this.audio.pause();
    }

    volumen(event) {

        this.valueVolume = event.detail.value;
        this.stream.volume = this.valueVolume / 100;

    }
}

и мой player.page. html выглядит так:

<ion-header no-border>
	<ion-toolbar>
		<ion-buttons slot="start" class="chevron">
			<ion-button
				class=" circle-button ion-no-padding"
				fill="clear"
				shape="round"
				color="default"
				(click)="closeModal()"
			>
				<i class="icon-chevron-down"></i>
			</ion-button>
		</ion-buttons>
		<ion-title> Live Now</ion-title>
	</ion-toolbar>
</ion-header>
<ion-content class="ion-text-center">
	<div class="h-100  vertical-align">
		<div
			class="image-container"
			[ngStyle]="{'background-image': 'url('+ data?.photo +')'}"
		></div>
		<div class="py">
			<h4>{{ data?.title }}</h4>
			<p>{{ data?.text }}</p>
		</div>
		<ion-buttons>
			<ion-button
				class="media-button circle-button ion-no-padding"
				fill="clear"
				size="large"
				shape="round"
				color="default"
			>
				<i class="icon-share-2"></i>
			</ion-button>


			<ion-button class="play-button" (click)="playAudio()"></ion-button> 
			<ion-button class="stop-button"  (click)="stopAudio()"></ion-button>
			

			<ion-button
				class="media-button circle-button ion-no-padding"
				fill="clear"
				size="large"
				shape="round"
				color="default"
			>
				<i class="icon-star"></i>
			</ion-button>
		</ion-buttons>
		<ion-range
			min="0"
			max="100"
			color="secondary"
			[value]="valueVolume"
			(ionChange)="volumen($event)"
		>
			<ion-label slot="start">
				<i class="icon-volume-1"></i>
			</ion-label>
			<ion-label slot="end">
				<i class="icon-volume-2"></i>
			</ion-label>
		</ion-range>
	</div>
</ion-content>

Спасибо за любую помощь, которая может мне помочь.

Кевин

Answer 1

удалось заставить его играть нормально.

аудио: любое; Мне нужно было перейти на onInit

Просто, когда я нажимаю "Стоп", муси c останавливается, но, похоже, все еще загружается с сервера.

Answer 2

Вы можете использовать Ioni c родные плагины Cordova. Эти плагины доступны на веб-сайте Ioni c framework. Установите плагин и следуйте простым инструкциям, приведенным в do c для активации плагина. Некоторые плагины требуют специального разрешения для работы в Ios (например, Geocoder). Пожалуйста, внимательно прочитайте do c.

https://ionicframework.com/docs/native/native-audio

Здесь я прилагаю ссылку Ioni c Ссылка на плагин для встроенного аудиоплеера. Не забудьте импортировать плагин в файл app.module.ts после успешной установки, в противном случае он начнет отображать ошибку типа staticInjectError