web-dev-qa-db-ja.com

Angular 4でサウンドを再生します

AngularでElectron appに取り組んでいます。4.特定のアクションでサウンドを再生したいです。そのためのモジュールまたはコードはありますか？ angular 4にあるか、または電子が何らかのサービスを提供している場合、それも動作するはずです。

何らかのアクションで再生したいので、JavaScriptのHTMLオーディオタグとaudio（）を使用できません

2〜3秒の音だけを再生したいので、他の機能は必要ありません。

電子またはAngular 4のいずれかで、いずれも機能します...

angularaudioelectron
27
hardiksa

動作しているプロジェクト（angular 4）でこれを行っただけで、動作しました

playAudio(){
  let audio = new Audio();
  audio.src = "../../../assets/audio/alarm.wav";
  audio.load();
  audio.play();
}
this.playAudio();

パスが正しいこと、および既存のオーディオを参照していることを確認してください

45
Nelson Bwogora

ロビンのコメントによると、私は次のようにtsファイルのaudio（）オブジェクトを使用して使用できるリンクをチェックしました：

this.audio = new Audio();
this.audio.src = "../../../assets/sounds/button_1.mp3";
this.audio.load();
this.audio.play();
32
hardiksa

更新：同じ問題があり、これを解決するためにElementRefでViewChild参照を使用しました。

app.component.ts

@ViewChild('audioOption') audioPlayerRef: ElementRef;

onAudioPlay(){
  this.audioPlayerRef.nativeElement.play();
}

app.component.html

   <audio #audioOption>
       <source src='../*.mp3' type="audio/mp3">
   </audio>
17
Renato Francia

howler.js を使用して試すことができます
npm install --save howlerを使用してプロジェクトにインストールし、次のようなサウンドを再生できます。

var sound = new Howl({
  src: ['sound.mp3']
});

sound.play();
4
Aaron Shappell

Asmonコードは優れていますが、本当の問題は、このページでGoogle Chromeポリシーが更新されたことだと思います https://developers.google.com/web/updates/2017/09/autoplay-policy-changes＃webaudio あなたは答えを見つけることができます要約すると、焦点はこれにあるべきです。

Chromeの自動再生ポリシーは簡単です：

  • ミュートされた自動再生は常に許可されます。
    • 次の場合、音声付きの自動再生が許可されます。
  • ユーザーがドメインと対話しました（クリック、タップなど）。
  • デスクトップでは、ユーザーのMedia Engagement Indexのしきい値を超えました。これは、ユーザーが以前に音声付きのビデオを再生したことを意味します。
  • モバイルでは、ユーザーは[ホーム画面にサイトを追加しました]。
  • トップフレームは、iframeに自動再生許可を委任して、音声付きの自動再生を許可できます。
    • 1
    Norberto Quesada
    playSound(sound) {
    sound = "../assets/sounds/" + sound + ".mp3";
    sound && ( new Audio(sound) ).play()
  }

    このメソッドを再利用可能にする必要がある場合、soundはファイル名です。

    0
    gildniy