web-dev-qa-db-ja.com

Angular 2でmp3を再生する方法は？

リモートサーバーから動的なmp3ファイルをロードし、ボタンを押して再生する小さなイオン/角度アプリケーションを書きたいORチェックされている場合は、自動的に再生します。シンプルな<audio></audio>しかし、これがこれのための良い方法であるかどうかはわかりません...

コード：

html

<audio id="player">
<source id="source" src="http://remote.address.com/example.mp3"></source>
</audio>

javascript

play(){
var audio= document.getElementById('player');
audio.play();
}
angularionic2
12
MegaX

HTMLではなくJavaScriptコードで新しいAudio要素を作成できます。

例えば ​​：

var audio = new Audio();
audio.src = "http://remote.address.com/example.mp3";
audio.load();
audio.play();
23
reda igbaria

Ionic-2/Angular-2モバイルアプリケーションでサウンドを実行する場合。

フォローIonic 2ガイドはこちら

インストール：

ionic plugin add --save cordova-plugin-nativeaudio
npm install --save @ionic-native/native-audio

使用法：

import { NativeAudio } from '@ionic-native/native-audio';

    constructor(private nativeAudio: NativeAudio) { }



    this.nativeAudio.preloadSimple('uniqueId1','path/to/file.mp3').then(onSuccess, onError);
    this.nativeAudio.preloadComplex('uniqueId2','path/to/file2.mp3', 1, 1, 0).then(onSuccess, onError);

    this.nativeAudio.play('uniqueId1').then(onSuccess, onError);

    // can optionally pass a callback to be called when the file is done playing
    this.nativeAudio.play('uniqueId1', () =>console.log('uniqueId1 is done playing'));

source-1：https://stackoverflow.com/a/43917441/6786941

3
Amr Ibrahim

@rebaの回答を試しましたが、モバイルブラウザでは機能しなかったか、オーディオファイルの再生を停止する自動再生ポリシーがある可能性があります。ですから、audio要素を作成し、srcを動的に変更します。

<audio id="player">
   <source></source>
</audio>

Angularでは、

play(){
   let audio= document.getElementById('player');
   audio.src = "http://remote.address.com/example.mp3";
   audio.load();
   audio.play();
}

注：ページに音声タグを表示したくない場合は、[hidden]

0
Rohan Kumar