обновить аудио источник, когда функция Ajax успешно - PullRequest
Новая
       33

обновить аудио источник, когда функция Ajax успешно

0 голосов
/ 11 мая 2018

На моем сайте WordPress у меня есть форма, которая преобразует текст в аудио, используя AJAX и PHP. Имя файла остается неизменным при обновлении преобразованного текста, просто воссоздает файл.

Кажется, все работает нормально, за исключением того, что воспроизводимый источник звука не перезагружается / не обновляется при обновлении текста.

Кнопка загрузки по умолчанию дает мне обновленный файл, и если я обновляю всю страницу, я могу только тогда услышать воспроизведение обновленного файла.

Мой код (упрощен для актуальности) - 

jQuery(document).on('click', '#savetext', function(e) {
  e.preventDefault();
  var myVideo = $('#player');
  var path = $("#path").val();
  myVideo.src = path;

  $.ajax({
    data: {
      action: 'polly_pros',
      pollytext: txt,
      rate: rate,
      voice: voice
    },
    type: 'post',
    url: polpro.ajax_url,
    cache: false,
    success: function(data) {
      console.log(data);
      myVideo.load();
      myVideo.get(0).play();
    },
    error: function() {
      console.log("Error");
    }
  });
});

<audio id="player" controls>
  <source id="audiosource" src="<?php echo $thepath; ?>" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<textarea name="pollytext" id="pollytext"></textarea>
<button type="submit" id="savetext" name="savetext">save text</button>

Как сделать так, чтобы при обновлении файла воспроизводился звук?

UPDATE

Я попробовал следующее предложение, но оно не устранило проблему - 

 $.ajax ({        
         data: {
          action: 'polly_pros', 
          pollytext: txt,
          rate: rate,
          voice: voice
        },
         type: 'post',
         url: polpro.ajax_url,
         cache: false,
       success: function(data) {
           console.log(data);
 myVideo.src = path+"&rnd="+new Date().getTime();
myVideo.load();
myVideo.get(0).play();
        },
          error: function() {
            console.log("Error");            
        }
            });

Ответы [ 4 ]

0 голосов
/ 24 мая 2018

Скорее всего, это потому, что функция, вызываемая Ajax, только перезагружает файл, но не сохраняет новый. Поэтому браузер не перезагружает этот файл.

Вот решение

Вы должны добавить случайную строку в конце имени файла, чтобы браузер подумал, что это другой файл, и перезагрузить его 

jQuery(document).on('click', '#savetext', function(e) {
  e.preventDefault();
  var myVideo = $('#player');
  var path = $("#path").val();
  myVideo.src = path + "?" + new Date().getTime();

  $.ajax({
    data: {
      action: 'polly_pros',
      pollytext: txt,
      rate: rate,
      voice: voice
    },
    type: 'post',
    url: polpro.ajax_url,
    cache: false,
    success: function(data) {
      console.log(data);
      myVideo.load();
      myVideo.get(0).play();
    },
    error: function() {
      console.log("Error");
    }
  });
});

Отметка времени - это число, которое вы точно знаете, оно будет отличаться каждый раз.

EDIT

Если это работает иногда, а иногда нет, это, вероятно, означает, что иногда Ajax работает быстрее, а иногда медленнее. Это должно помочь 

jQuery(document).on('click', '#savetext', function(e) {
  e.preventDefault();
  var myVideo = $('#player');

  $.ajax({
    data: {
      action: 'polly_pros',
      pollytext: txt,
      rate: rate,
      voice: voice
    },
    type: 'post',
    url: polpro.ajax_url,
    cache: false,
    success: function(data) {
      console.log(data);
      var path = $("#path").val();
      myVideo.src = path + "?" + new Date().getTime();
      myVideo.load();
      myVideo.get(0).play();
    },
    error: function() {
      console.log("Error");
    }
  });
});
0 голосов
/ 23 мая 2018

Добавить метку времени в пути URL, при этом вызывается XHR.Если это не работает, то добавьте заголовок предотвращения кэша на стороне сервера.Надеюсь, это сработает. 

$.ajax({
  data: {
    action: 'polly_pros',
    pollytext: txt,
    rate: rate,
    voice: voice
  },
  type: 'post',
  url: polpro.ajax_url + "&rnd=" + new Date().getTime(), //timestamp
  cache: false,
  success: function(data) {
    console.log(data);
    myVideo.src = path + "&rnd=" + new Date().getTime(); //timestamp
    myVideo.load();
    myVideo.get(0).play();
  },
  error: function() {
    console.log("Error");
  }
});
0 голосов
/ 24 мая 2018

В зависимости от вашего подхода и пожеланий о том, как все настроено на вашей странице, на вашей странице может быть область «div», которую вы обновляете с помощью GET типа AJAX на своей странице. Таким образом, вы перезагрузите видео на свою страницу, а затем перейдете к функции воспроизведения, как обычно.

Для этого нужно иметь отдельный файл для общей страницы, где все происходит, и иметь само видео в другом файле, который успешно загружается с помощью AJAX типа GET.

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

0 голосов
/ 19 мая 2018

Я бы попробовал другой подход, чтобы попытаться решить эту проблему, во-первых, вместо перезагрузки src аудио, вы можете попробовать воссоздать весь элемент, а затем загрузить () и воспроизвести () новый элемент (извлеченный изздесь: jQuery / JavaScript Динамическое изменение источника звука ), например: 

$.ajax ({        
        data: {
          action: 'polly_pros', 
          pollytext: txt,
          rate: rate,
          voice: voice
        },
        type: 'post',
        url: polpro.ajax_url,
        cache: false,
        success: function(data) {
           console.log(data);

           var newAudio = $(createAudio(path));
           $("#player").replaceWith(newAudio);
           $("#player").load();
           newAudio.play();
        },
        error: function() {
           console.log("Error");            
        }
});

function createAudio(src) {
  output =  '<audio id="player">';
  // you can add more source tag
  output +=  '<source src='+src+'" type="audio/mp3" />';
  output +=  '</audio>';
}

Если это не сработает, я попытался бы сделать это, чтобы воспроизвести звук, когда мышь входит вэлемент (извлечено отсюда: Загрузка аудиоэлемента после динамического изменения источника ): 

var audio = $("#audio")[0];
$("#audio").mouseenter(function () {
   audio.load();
   audio.play();
});

Если ничего из вышеперечисленного не работает, вы можете попробовать как этот парень ( jQuery / JavaScript ChangeИсточник звука динамически ) сделал подобный подход и, наконец, заставил его работать, делая это с чистым javascript (последний ответ), как: 

var audioElement = document.getElementById('audio');
audioElement.setAttribute('src', src);
// Load src of the audio file
audioElement.load();
audioElement.play();

Надеюсь, это поможет!

...