Angular-cli: Problem "Property 'then' does not exist on type 'void'." with HTMLAudioElement

[leehung-net]

Hi all,
I use HTMLAudioElement to play audio. But when I 'npm start' or 'ng build ..', there is a problem. "Property 'then' does not exist on type 'void'."
Please help me.
Code below (https://googlechrome.github.io/samples/play-return-promise/):
playAudio(src: any) {
let audio: HTMLAudioElement = this.player.nativeElement;
audio.src = src;
// audio.load();
if (this.isPlay === false) {
var playPromise = audio.play();
if (playPromise !== undefined) {
playPromise.then(function () {
// Automatic playback started!
}).catch(function (error) {
// Automatic playback failed.
// Show a UI element to let the user manually start playback.
});
}
this.isPlay = true;
audio.onended = function () {
this.isPlay = false;
}.bind(this);
} else {
audio.pause();
this.isPlay = false;
}
}

[BurningDog]

It looks like the problem is on this line:

playPromise.then(function () {

I'm not quite sure exactly how you'd include this code in a component.ts file. You could try including it as a static .js file instead (by adding it to the "assets" array in .angular-cli.json).

At any rate, this issue is related to getting code working in typescript and so isn't an issue with angular-cli...so your issue is probably going to be closed. You'd be better off asking on Stack Overflow.

[filipesilva]

Yeah stack overflow is a better place to ask this sort of question. @BurningDog is right that this is a TypeScript types issue. Maybe you can get around it by doing (playPromise as any).then(function () { but the real fix is to figure out where your typings are broken.

[Anujraval24]

use arrow functions it will resolve the issue

playAudio(src: any) { let audio: HTMLAudioElement = this.player.nativeElement; audio.src = src; // audio.load(); if (this.isPlay === false) { var playPromise = audio.play(); if (playPromise !== undefined) { playPromise.then( () =>{ // Automatic playback started! }).catch( (error) =>{ // Automatic playback failed. // Show a UI element to let the user manually start playback. }); } this.isPlay = true; audio.onended = ()=> { this.isPlay = false; }.bind(this); } else { audio.pause(); this.isPlay = false; } }

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}