Как играть в mp3 с Angular 2?

Я хочу написать небольшое ионно-угловое приложение, где я загружаю динамический mp3-файл с удаленного сервера и воспроизвожу его для нажатия кнопки ИЛИ, если он установлен, я играю его автоматически. Я пытался использовать простой <audio></audio> но я не уверен, если это хороший способ для этого ...Как играть в mp3 с Angular 2?

код:

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

источник

2015-11-22 MegaX

Самый angular2 способ сделать это, чтобы захватить 'audio' элемент с переменной , как в этом [ответе] (http://stackoverflow.com/a/33771672/4933038). Помните, что все это javascript, поэтому не бойтесь его использовать :) –

Я думал, что угловой2 и ionic2 более похожи :(no @ViewChild в ионном или я должен что-то импортировать? – MegaX

Я не знаю об Ionic2 и Ionic1 Вы включили angular2 в свои тэги, и название вопроса спрашивает только об угловом2, так что бы это сделать. Но для вашего случая я не мог сказать, что это не просто угловое2, извините:/ –

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

, например:

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

источник

2016-02-16 19:21:26

это создает элемент в фоновом режиме или в html? Я хочу поставить кнопку воспроизведения и паузы. как это можно сделать .. или мы можем просто использовать триггеры для воспроизведения и паузы с помощью этого? – Basit

создает его в фоновом режиме, если вы хотите приостановить его, вы можете использовать функцию паузы аудио audio.pause(); Ознакомьтесь с API-интерфейсом Media: [link] (https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) –

Могу ли я иметь рабочий пример для того же самого? что-то вроде plunkr или фрагмента? –

Если вы хотите запустить звук в ионическом-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

источник

2017-05-11 15:00:24

Будет ли это работать с удаленным URL-адресом? –

Я не знаю, он работает с локальными файлами –

, но при отладке загружает файл через http –

ответ

Смежные вопросы