如何使用 Angular 2 播放 mp3？答案

【问题标题】：How to play mp3 with Angular 2?如何使用 Angular 2 播放 mp3？
【发布时间】：2015-11-22 19:33:21
【问题描述】：

我想编写一个小型 ionic/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();
}

【问题讨论】：

最有角度的方法是使用变量获取audio 元素，就像在这个answer 中一样。请记住，所有这些都是 javascript，所以不要害怕使用它 :)
我认为 angular2 和 ionic2 更相似 :( ionic 中没有 @ViewChild 或者我应该导入一些东西？
我不知道 Ionic2 和 Ionic1。您在标签中包含了 angular2，问题标题仅询问 angular2，这样就可以了。但是对于您的情况，我不能说，这不仅仅是 angular2，抱歉：/
它正在工作......我只是从 html 中留下了一个 ( )，所以这个函数甚至没有被调用 :) 谢谢！
PS:- 出于某种原因，我在同一代码中遇到错误，只需删除 </source> 并在源标签末尾添加 /> 即可解决

标签： angular ionic2

【解决方案1】：

您可以在 Javascript 代码中创建一个新的音频元素......而不是在 HTML 中

例如：

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

【讨论】：

这是在后台还是在 html 中创建元素？我的意思是放播放和暂停按钮。怎么做..或者我们可以使用触发器来播放和暂停？
它会在后台创建它如果你想暂停它你可以使用暂停函数audio audio.pause();查看媒体元素 API：link
我可以有相同的工作示例吗？像 plunkr 或 sn-p 之类的东西？

【解决方案2】：

如果您想在 Ionic-2 / Angular-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

【讨论】：

但在调试时它通过 http 加载文件

【解决方案3】：

我已经尝试过@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]

【讨论】：