如何解决角离子中的动态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 举报,一经查实,本站将立刻删除。