Nano Hash - криптовалюты, майнинг, программирование

Как отправить заголовки при настройке audio src?

Я пытаюсь воспроизвести аудиофайл, используя аудиотег html5.

Играет нормально...

Но по какой-то причине требуется, чтобы браузер запроса, сделанный для источника, должен включать определенный заголовок, который браузер (в моем случае Safari) не добавляет. (где, как я вижу, хром добавляет)

Заголовок: Accept-encoding: gzip

Как я могу это сделать?

Я не хочу загружать весь файл заранее... Я хочу, чтобы тег audio обрабатывал его с новым заголовком.

document.getElementById("audio").load();
document.getElementById("audio").play();
<audio id="audio" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/7/7b/FurElise.ogg/FurElise.ogg.mp3"> <audio>

Еще раз, когда этот код запускается, я просто хочу изменить заголовок для каждого запроса, сделанного для этого...

Примечание.

Когда вы добавляете источник и загружаете, скажем, Chrome, браузер делает «диапазонные запросы», запрашивая последующие части медиафайла, чтобы он мог начать воспроизведение, как только будут доступны некоторые данные, однако CDN, который я использую, требует этих запросы на этот конкретный заголовок, проблема в хроме, этот заголовок добавляется самим хромом, тогда как в сафари это не так, поэтому я хотел перехватить эти запросы, которые делает браузер, когда я вызываю load() для медиа-элемента и добавляю заголовок. Я не хочу загружать весь файл перед оплатой, я знаю, что это работает, но это противоречит цели.

javascript html5-video html5-audio akamai
11.12.2020

  • Что вы пробовали? Что такое сообщение об ошибке? 11.12.2020
  • что я пробовал? Я добавил src в тег audio, вот что я пробовал! Я не знаю, как установить собственный заголовок для аудио-тегов, вот что я спросил, что такое сообщение об ошибке? ошибки нет, вопрос ищет способ добиться чего-то, о чем я понятия не имею, я читал некоторые ответы, где люди говорят, что это невозможно 11.12.2020
  • @ceving Я думаю, вы запутались, я не делаю никаких запросов самостоятельно, браузер делает это, когда я вызываю load (), я хочу перехватить это, чтобы изменить его! 11.12.2020
  • Для вопроса нужен минимальный воспроизводимый пример. И то для MCVE важно, что он работает. В противном случае он не воспроизводим. 11.12.2020
  • @cerving Хорошо, буду иметь в виду, спасибо за редактирование вопроса! 11.12.2020
  • проверьте это! 14.12.2020
  • Насколько я понял и прочитал на developer.mozilla.org/en -US/docs/Web/HTML/Element/audio, на сегодняшний день невозможно установить пользовательские заголовки. У вас есть контроль на стороне сервера? Если это так, возможно, внесите изменения, чтобы сделать его совместимым, или проверьте, может ли сафари каким-то образом вставить заголовок gzip. 15.12.2020
  • @manishg нет, у меня нет никакого контроля на стороне сервера, иначе было бы намного проще, я думаю, единственный оставшийся мне способ - загрузить все видео через js и передать его в теги мультимедиа. 15.12.2020

Ответы:


1

Поскольку то, что вы хотите сделать, это загрузить, а затем воспроизвести, как насчет объединения вашего запроса с шаблоном стиля XMLHttpRequest, используя что-то вроде fetch?

Нравиться:

HTML

<!-- just an indicator, in case the file is large -->
<div id="loading"><em>File is loading. Please wait...</em></div>

<!-- initially hide the audio tag. Also, change the 'src' to 'data-src' so it doesn't automatically load -->
<audio id="audio" style="display: none;" data-src="https://upload.wikimedia.org/wikipedia/commons/transcoded/7/7b/FurElise.ogg/FurElise.ogg.mp3" controls></audio>

JavaScript

// define variables
  var audioEl = document.getElementById("audio");
  function fetchAudioFile() {
    // go get the file
    var requestObj = new Request(audioEl.dataset.src, {
        method: 'GET',
        headers: {
          'Accept-encoding': 'gzip'   // add your header(s)
        },
        referrerPolicy: 'no-referrer'
    });

    fetch(requestObj).then(function(response) {
      return response;
    }).then(async function(outcome) {
      const blob = await outcome.blob();
      // convert our blob to a url that can be used by the audio tag
      const url = window.URL.createObjectURL(blob);
      // replace the source
      audioEl.src = url;
      // hide the helpful text
      document.getElementById("loading").style["display"] = "none";
      // show the audio tag
      audioEl.style["display"] = "block";
      // play it immediately
      audioEl.play();
    });
  };

// get the file
  fetchAudioFile();

Надеюсь, это поможет. Обратите внимание, однако, что в зависимости от браузера иногда звук может не воспроизводиться автоматически, если пользователь сначала не взаимодействует со страницей или явно не дает разрешения.

16.12.2020
  • Я не хочу скачивать весь файл перед игрой. 16.12.2020
  • когда вы добавляете источник и загружаете, скажем, chrome, браузер делает «диапазонные запросы», запрашивая последующие части медиафайла, чтобы он мог начать воспроизведение, как только будут доступны некоторые данные, однако CDN, который я использую, требует этих запросы на наличие этого конкретного заголовка, проблема в хроме, этот заголовок добавляется самим хромом, а в сафари - нет, поэтому я хотел перехватить эти запросы, которые делает браузер, когда я вызываю load() для медиа-элемента и добавляю заголовок , надеюсь, теперь у вас появилась более ясная картина... 16.12.2020
  • Хорошо, я вижу, вы добавили это уточнение к своему первоначальному вопросу. убедитесь, что поведение — это то, что вы хотите, независимо от браузера). Если вы не хотите загружать весь файл перед воспроизведением, вы все равно можете адаптировать мой ответ выше в поток, который можно загружать и воспроизводить по мере его «конвейерной передачи». Некоторые идеи см. здесь: developer.mozilla.org/en-US/docs/Web/API/Body/ буфер массива 16.12.2020
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..