Как играть в mp3 с помощью Angular 2?

Я хочу написать небольшое ионное / angular приложение, в котором я загружаю динамический mp3 файл с удаленного сервера и воспроизвожу его для нажатия кнопки ИЛИ, если он установлен, я автоматически его воспроизвожу. Я попытался использовать простой <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();
}

Ответ 1

Вы можете создать новый элемент аудио в Javascript-коде... не в HTML

например:

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

Ответ 2

Если вы хотите запустить звук в мобильном приложении 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: /questions/455211/ionic-2-how-to-play-sound-effects/1980537#1980537

Ответ 3

Я попытался ответить @reba, но он не работал в мобильных браузерах или, возможно, существуют политики автозапуска, которые не воспроизводят аудиофайлы. Так что я создал и audio элемент и динамически изменить src как,

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

В угловых,

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

Примечание. Если вы не хотите показывать аудиометку на странице, вы можете сделать ее [hidden]