HTML5 аудио-динамический источник является нулевым, как его обнаружить? - PullRequest
Новая
       9

HTML5 аудио-динамический источник является нулевым, как его обнаружить?

0 голосов
/ 22 мая 2019

У меня есть аудиоэлемент HTML5, и его источник указывает не непосредственно на mp3-файл, а на действие в контроллере, который возвращает или mp3-файл (FileResult), или null. Получение результата занимает некоторое время (1 мин), поэтому я реализовал счетчик. Если файл существует, проблем нет, я использую событие «onloadeddata» аудио, чтобы остановить вращение. Но если нет файла, я не могу поймать событие, так что вращается спиннер, но звук становится недоступным (серые тона).

Отредактировано: перехват события 'error' на аудиоэлементе работает в Firefox, а не в Chrome, IE или Edge (мне нужно, чтобы он работал в Chrome и IE)

Я попробовал эти события аудио (прервать, очистить, ошибка, остановлено, приостановить) и ничего. Я тоже перепробовал событие source (onerror), но ничего. 

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

Для существующего файла работает нормально. Но из-за нулевого результата действия Play в контроллере вызова я не могу отловить событие нулевого источника или недоступного аудиоэлемента.

Отредактировано: работает в Firefox, а не в Chrome, IE или Edge (мне нужно, чтобы оно работало в Chrome и IE)

Пожалуйста, помогите.

1 Ответ

1 голос
/ 22 мая 2019

Я предполагаю, что ваша конечная точка 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 на странице.

Наконец, я бы предложил вам вместо этого изменить конечную точку, чтобы она возвращала код состояния HTTP 404 NotFound, когда файла нет, а затем вы можете просто подключиться к событию error, чтобы обновить пользовательский интерфейс.

...