2015-11-22 9 views
12

リモートサーバからダイナミックmp3ファイルをロードし、ボタンを押して再生する小さなイオン/角度アプリケーションを作成したい、またはチェックされていれば自動的に再生します。私は、単純な<audio></audio>を使用しようとしましたが、私は、これは、このための良い方法であるかどうかわからないです...Angular 2でmp3を再生するには?

コード:

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(); 
} 
+2

これを行うには、最もangular2方法は、変数を 'audio'要素をつかむためにありますこの[回答](http://stackoverflow.com/a/33771672/4933038)のように。覚えておいてください、これはjavascriptなので、それを使うのを恐れてはいけません:) –

+0

私はangular2とionic2がもっとsimmilarだと思っていました:(@ViewChildはionicでないか、何かインポートする必要がありますか?) – MegaX

+0

Ionic2もIonic1あなたはあなたのタグにangular2を入れました。質問タイトルはangular2だけについて質問しますので、あなたのケースでは私は言うことができませんでした。角度2だけではありません。/ –

答えて

20

新しいオーディオを作成することができます例えばJavaScriptコードではない... HTML

の要素:

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

これはバックグラウンドまたはhtmlで要素を作成しますか?私はプレイと一時停止ボタンを置くことを意味します。どのようにすることができます..または我々はこれを使用して再生と一時停止にトリガを使用することができますか? – Basit

+0

一時停止したい場合はバックグラウンドで作成し、一時停止機能のオーディオを使用することができます audio.pause(); メディア要素APIをチェックアウトしてください: [link](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) –

+0

私は同じように動作する例がありますか? plunkrやスニペットのようなもの? –

2

あなたはイオン-2 /角度-2モバイルアプリケーションでサウンドを実行したい場合。

Follow Ionic 2 guide here

インストール:

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

+0

これはリモートURLで動作しますか? –

+0

私は分かりませんが、ローカルファイル –

+0

で動作しますが、デバッグ時にはhttpでファイルをロードします –

関連する問題