title: Getting Play button to play a stream link
body: <p>Just started using Ionic 4 and Angular so a very new beginner :)</p>
  
  <p>I bought a UI Template from code canyon but never realised I had to code the music playing part of it.  Anyway I have been searching to get a stream playing but failed.  I found a post which said to just use a HTML5 code to stream music.  </p>
  
  <p>When I click Play the music never plays.  Where am I going wrong ? My player.page.ts looks like this :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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;
  
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>and my player.page.html looks like this :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ion-header no-border&gt;
   &lt;ion-toolbar&gt;
    &lt;ion-buttons slot="start" class="chevron"&gt;
     &lt;ion-button
      class=" circle-button ion-no-padding"
      fill="clear"
      shape="round"
      color="default"
      (click)="closeModal()"
     &gt;
      &lt;i class="icon-chevron-down"&gt;&lt;/i&gt;
     &lt;/ion-button&gt;
    &lt;/ion-buttons&gt;
    &lt;ion-title&gt; Live Now&lt;/ion-title&gt;
   &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;
  &lt;ion-content class="ion-text-center"&gt;
   &lt;div class="h-100  vertical-align"&gt;
    &lt;div
     class="image-container"
     [ngStyle]="{'background-image': 'url('+ data?.photo +')'}"
    &gt;&lt;/div&gt;
    &lt;div class="py"&gt;
     &lt;h4&gt;{{ data?.title }}&lt;/h4&gt;
     &lt;p&gt;{{ data?.text }}&lt;/p&gt;
    &lt;/div&gt;
    &lt;ion-buttons&gt;
     &lt;ion-button
      class="media-button circle-button ion-no-padding"
      fill="clear"
      size="large"
      shape="round"
      color="default"
     &gt;
      &lt;i class="icon-share-2"&gt;&lt;/i&gt;
     &lt;/ion-button&gt;
  
  
     &lt;ion-button class="play-button" (click)="playAudio()"&gt;&lt;/ion-button&gt; 
     &lt;ion-button class="stop-button"  (click)="stopAudio()"&gt;&lt;/ion-button&gt;
     
  
     &lt;ion-button
      class="media-button circle-button ion-no-padding"
      fill="clear"
      size="large"
      shape="round"
      color="default"
     &gt;
      &lt;i class="icon-star"&gt;&lt;/i&gt;
     &lt;/ion-button&gt;
    &lt;/ion-buttons&gt;
    &lt;ion-range
     min="0"
     max="100"
     color="secondary"
     [value]="valueVolume"
     (ionChange)="volumen($event)"
    &gt;
     &lt;ion-label slot="start"&gt;
      &lt;i class="icon-volume-1"&gt;&lt;/i&gt;
     &lt;/ion-label&gt;
     &lt;ion-label slot="end"&gt;
      &lt;i class="icon-volume-2"&gt;&lt;/i&gt;
     &lt;/ion-label&gt;
    &lt;/ion-range&gt;
   &lt;/div&gt;
  &lt;/ion-content&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for any help anyone can give me.</p>
  
  <p>Kevin</p>