角离子中的动态Amazon S3 Mp3网址HTML音频元素

问题描述

我正在制作Ionic 5音乐播放器，这是我尝试过的！我必须使用所有控制选项在后台播放Mp3

在页面HTML

<audio
    #player
    src="{{src}}">
</audio>

在TS文件中

import { Component,OnInit,AfterViewInit,ViewChild,ElementRef,Input } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { HelperService } from '../../helper.service';
import { ApiGenerateService } from '../../api-generate.service';

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


export class NowplayPage implements  AfterViewInit {

  @input() public src: string;
  @ViewChild('player',{ static: false }) public playerElementRef:  ElementRef;

  isPlay = false;
  isLoading = false;
  currentTime = 0;
  duration = 0;
  private _player: HTMLAudioElement;

  constructor(
    
  ) { }

  ngOnInit() {
  }
  
  ionViewWillEnter() {
   
  }

  ngAfterViewInit(): void {
    this._player = this.playerElementRef.nativeElement;
    this._bindplayerEvents();
  }

  // ffh
  async playContent(url) {
    console.log('src 000>>>>><<<<',url);
    this.isPlaying = true;
    this.showPlay = true;
    this.src = url;
    this._player.play();
    console.log('src >>>>><<<<',this._player.currentSrc);
  }

  pause(): void {
    this.showPlay = false;
    this._player.pause();
  }

  seek({ detail: { value } }: { detail: { value: number } }): void {
      this._player.currentTime = value;
  }

  private _bindplayerEvents(): void {
      this._player.addEventListener('playing',() => {
          this.isPlay = true;
      });

      this._player.addEventListener('pause',() => {
          this.isPlay = false;
      });

      // this._player.addEventListener('timeupdate',() => {
      //     this.currentTime = Math.floor(this._player.currentTime);
      // });



      this._player.addEventListener('seeking',() => {
          this.isLoading = true;
      });

      this._player.addEventListener('seeked',() => {
          this.isLoading = false;
      });

      this._player.addEventListener('loadstart',() => {
          this.isLoading = true;
      });

      this._player.addEventListener('loadeddata',() => {
          this.isLoading = false;
          this.duration = Math.floor(this._player.duration);
      });
      console.log('src >>>>><<<<',this._player.currentSrc);
      // this._player.load();
  }
  // jdbfvbs
}

我在按钮单击中调用playContent()函数 src没有绑定，请帮助！ Uncaught (in promise) DOMException: Failed to load because no supported source was found.

音频来自Amazon S3，当我在Chrome中播放音频时，它的播放&&如果我直接在HTML中使用音频src，则它也在播放

帮助！谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）