Question

我有HTML5音频元素，其来源不是直接指向mp3文件，而是指向控制器中的操作，该操作返回mp3文件（FileResult）或null。获得结果需要一段时间（1分钟），因此我实现了Spinner。如果文件存在，则没有问题，我使用音频事件“ onloadeddata”来停止微调器。但是，如果没有文件，我将无法捕获任何事件，因此微调器正在旋转，但是音频不可用（灰色调）。

已编辑：在音频元素上捕获“错误”事件适用于Firefox，不适用于Chrome，IE或Edge（我需要适用于Chrome和IE）

我尝试了这些音频事件（中止，清空，错误，停顿，挂起），但没有任何反应。我也尝试了源事件（错误），但是什么也没有。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio id="audioplayer" controls controlsList="nodownload" preload="none">
  <source id="sourceId" src="<%: Url.Action("Play", "Call", new { id = calledNumber.Id }) %>" type="audio/mpeg" />
  Your browser does not support the
  <code>audio</code> element.
</audio>

由@Rory McCrossan的答案编辑：

$('#audioplayer').on({
'play': function (e) {
    if (!$(this).data('loaded')) {
        displayBusyIndicator();
    }
},
'loadeddata': function (e) {
    if (isNaN(this.duration) || this.duration === 0) {
        hideBusyIndicator();
    } else {
        hideBusyIndicator();
        $(this).data('loaded', true)
    }
},
'error': function (e) {        
        hideBusyIndicator();       
}});

 public FileResult Play(int id)
  {
    try
      {
        // getting stream of file
        // ....
        var stream = client.OpenRead(url);

        return File(stream, "audio/mpeg");
       }
    catch(Exception e)
       {
         //logging and other actions
         Response.StatusCode = 404;
         return null;
         // I tried also return File(Stream.Null, "audio/mpeg");
       }
   }

对于现有文件，效果很好。但是，对于Call控制器中Play动作的无效结果，我无法捕获无效源或音频元素不可用的事件。

已修改：只能在Firefox上运行，不能在Chrome，IE或Edge上运行（我需要在Chrome和IE上运行）

请帮助。

Answer 1

我假设您的MVC端点始终返回200 OK响应，这是在找不到文件且您不返回数据的情况下发生的事件。因此error不会触发。

要解决此问题，您可以检查已加载媒体的duration属性，如下所示：

$('#audioplayer').on({
  'play': function(e) {
    if (!$(this).data('loaded')) {
      displayBusyIndicator();
    }
  },
  'loadeddata': function(e) {
    if (isNaN(this.duration) || this.duration === 0) {
      // empty data
      // show an error message here...
    } else {
      hideBusyIndicator();
      $(this).data('loaded', true)
    }
  }
});

请注意，此处使用data属性而不是全局变量。这是一种更好的做法，它将允许您在页面中使用多个audio和video元素。

最后，我建议您改为更改端点，以在没有文件时返回404 NotFound HTTP状态代码，然后只需挂接到error事件即可更新UI。

HTML5音频动态来源为空，如何检测到它？

1 个答案: