播放用户从本地计算机中选择的mp3并播放网络音频

时间:2016-11-06 20:46:08

标签: javascript html5 html5-audio audio-streaming fileapi

我是网络音频和文件Api的新手,并且刚好接近开头。

我的用例如下: 页面上有一个audio元素和一个Input = file元素,

  1. 用户使用输入元素上的浏览按钮在他们的计算机上选择一个mp3文件。
  2. 文件路径和名称绑定到音频元素作为源并播放Mp3。
  3. 我希望在网上找到很多这方面的食谱,但显然这不是一个常见的用例。

    我开始尝试并首先尝试:

    1. 将mp3复制到我的网络服务器。
    2. 将url(例如:... / wwwroot / mySong.mp3)硬编码到音频元素中。 这工作!!!证明音频元素有效。
    3. 接下来,我用本地计算机中的一个替换了url。 (例如:E:\ .... \ mySong.exe) 这是不好的。我看到浏览器中的网址标记为不安全,但无法播放。

      我在网上搜索了更多,看到了一个类似的案例,但是有了一张图片。这导致了以下代码 - 转换为使用音频:

      var objectURL = window.URL.createObjectURL(selectedSong.files [0]);

      然后我将obJectUrl绑定到音频源。

      这也失败了。它标记为不安全:blob。虽然这可能适用于图像,但我认为音频元素不知道如何处理它。

      此时我得出结论,这个简单的用例是不可能的。

      问题#1:我的结论是否正确?如果没有,我怎么能完成这个简单的用例。

      我开始思考我在网络上使用mp3文件的真实世界体验。我经常看到的用例是:

      1. 将Mp3从本地上传到网络上的服务器 - 例如dropbox。
      2. 连接到服务器并单击链接。 mp3播放。
      3. 在这种情况下,我没有收听本地计算机上的文件,而是正在收听服务器上的版本。

        问题#2 这是解决问题的正确方法吗?因此,在用户选择文件后,我将其发送到服务器,然后从那里播放链接。如果这是正确的,我该如何开始实现这个?

        在我的情况下,首次上传文件所造成的延迟对我的网络应用程序来说是可以接受的,但我希望尽量减少延迟。这让我想知道HTML本地存储是否是我想做的选择。我认为将本地mp3文件复制到浏览器的本地存储并在那里播放版本会更有效。

        问题3:本地存储是否可以更有效地实现我的目的?如果是这样的话?

        提前致谢。这也是我在这里的第一篇文章,所以如果我无意中违反了任何书面或不成文的规则,请告诉我。

0 个答案:

没有答案