获取播放按钮来播放流链接

Question

刚开始使用Ionic 4和Angular，所以是一个非常新的初学者:)

我从code canyon买了一个UI模板，但从来没有意识到我必须对它的音乐播放部分进行编码。 总之，我一直在搜索让音乐流播放，但失败了。 我发现了一个帖子，说只要使用HTML5代码来播放音乐。

当我点击 "播放 "时，音乐从未播放。 我到底是哪里出了问题？我的 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

你可以使用Ionic Cordova本地插件。这些插件可以在Ionic框架网站上找到，安装插件并按照文档中提供的简单说明激活插件。有些插件需要特殊的权限才能在Ios中工作（例如：Geocoder）。所以请仔细阅读文档。

https:/ionicframework.comdocsnativenative-audio.

这里我附上Ionic Native音频播放器插件的链接。安装成功后不要忘记导入app.module.ts文件中的插件，否则会出现以下错误。staticInjectError

Answer 2

设法让它正常播放。

audio: any; 需要移到onInit上。

只是当我按下停止键时，音乐停止了，但似乎还在从服务器下载。