LoginSignup
3

More than 5 years have passed since last update.

Angularアプリで効果音を出す

Posted at

Webアプリで独自の効果音を出したい話。
HTML内にタグを追記することなく、Typescript側だけで対応可。

dialog.component.ts
export class DialogComponent implements OnInit {

//コンポーネントのメンバとしてHTMLAudioElementを作成
    private SoundWarning: HTMLAudioElement = new Audio('sound/warning1.mp3');

//コンポーネントの呼出段階で音源ファイルを読み込んでおく
    ngOnInit() {
        this.SoundWarning.load();
    }

//メソッドが実行された時に音を鳴らす
    openDialog(DialogMessage){
        ....
        this.SoundWarning.play();
        ....
    }
}

効果音ならす部分をサービス化するとか、もう少し凝ったこと出来るけど次回に回して、とりあえず忘備録。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3