Question

我想通过AJAX使用函数wp_audio_shortcode()，然后我想自定义音频播放器样式，但是问题是AJAX请求返回的HTML代码不允许我自定义音频播放器样式，因为它正在返回：

<audio class="wp-audio-shortcode" id="audio-0-1" preload="none" style="width: 100%;" controls="controls">
<source type="audio/ogg" src="my_url" />
<a href="my_url">my_url</a>

使用AJAX时返回的HTML代码与仅使用PHP时的代码不同。（下面的示例）。

如何在AJAX中获得与PHP相同的结果？

1-PHP代码

function wp_audio_player() {
    $ogg_file = "https://cdn.online-convert.com/example-file/audio/ogg/example.ogg";
    $attr = array(
        'src' => $ogg_file,
        'loop' => '',
        'autoplay' => '',
        'preload' => 'none'
    );
    return wp_audio_shortcode( $attr );
}
echo wp_audio_player();

// returning this html code:
<div id="mep_0" class="mejs-container mejs-container-keyboard-inactive wp-audio-shortcode mejs-audio" tabindex="0" role="application" aria-label="Lecteur audio" style="width: 1245px; height: 40px; min-width: 239px;">
  <div class="mejs-inner">
    <div class="mejs-mediaelement">
      <mediaelementwrapper id="audio-4208-1"><audio class="wp-audio-shortcode" id="audio-4208-1_html5" preload="none" style="width: 100%; visibility: visible; height: 100%;" width="100%" height="100%" src="https://cdn.online-convert.com/example-file/audio/ogg/example.ogg?_=1"><source type="audio/ogg" src="https://cdn.online-convert.com/example-file/audio/ogg/example.ogg?_=1"><a href="https://cdn.online-convert.com/example-file/audio/ogg/example.ogg">https://cdn.online-convert.com/example-file/audio/ogg/example.ogg</a></audio></mediaelementwrapper>
    </div>
    <div class="mejs-layers">
      <div class="mejs-poster mejs-layer" style="display: none; width: 100%; height: 100%;"></div>
    </div>
    <div class="mejs-controls">
      <div class="mejs-button mejs-playpause-button mejs-play"><button type="button" aria-controls="mep_0" title="Lecture" aria-label="Lecture" tabindex="0"></button></div>
      <div class="mejs-time mejs-currenttime-container" role="timer" aria-live="off"><span class="mejs-currenttime">00:00</span></div>
      <div class="mejs-time-rail"><span class="mejs-time-total mejs-time-slider"><span class="mejs-time-buffering" style="display: none;"></span><span class="mejs-time-loaded"></span><span class="mejs-time-current"></span><span class="mejs-time-hovered no-hover"></span><span class="mejs-time-handle"><span class="mejs-time-handle-content"></span></span>
        <span
          class="mejs-time-float" style="display: none;"><span class="mejs-time-float-current">00:00</span><span class="mejs-time-float-corner"></span></span>
          </span>
      </div>
      <div class="mejs-time mejs-duration-container"><span class="mejs-duration">00:00</span></div>
      <div class="mejs-button mejs-volume-button mejs-mute"><button type="button" aria-controls="mep_0" title="Muet" aria-label="Muet" tabindex="0"></button></div>
      <a class="mejs-horizontal-volume-slider" href="javascript:void(0);" aria-label="Curseur de volume" aria-valuemin="0" aria-valuemax="100" role="slider"><span class="mejs-offscreen">Utilisez les flèches haut/bas pour augmenter ou diminuer le volume.</span>
        <div class="mejs-horizontal-volume-total">
          <div class="mejs-horizontal-volume-current" style="left: 0px; width: 100%;"></div>
          <div class="mejs-horizontal-volume-handle" style="left: 100%;"></div>
        </div>
      </a>
    </div>
  </div>
</div>

2-PHP和Ajax代码

// PHP
add_action('wp_ajax_wp_audio_player', 'wp_audio_player_ajax'); 
add_action('wp_ajax_nopriv_wp_audio_player', 'wp_audio_player_ajax');
function wp_audio_player_ajax() {
    $ogg_file = "https://cdn.online-convert.com/example-file/audio/ogg/example.ogg";
    $attr = array(
        'src'      => $ogg_file,
        'loop'     => '',
        'autoplay' => '',
        'preload'  => 'none'
    );
    echo wp_audio_shortcode( $attr );
    die();
}

// Javascript
jQuery.ajax({
    type : "POST",
    url : AJAX_URL,
    data : {
      action : 'wp_audio_player',
    },
    success:function(data) {
      alert(data);
    }
  });

// returning  this html code:
<!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
<audio class="wp-audio-shortcode" id="audio-0-1" preload="none" style="width: 100%;" controls="controls">
    <source type="audio/ogg" src="https://cdn.online-convert.com/example-file/audio/ogg/example.ogg?_=1" />
    <a href="https://cdn.online-convert.com/example-file/audio/ogg/example.ogg">https://cdn.online-convert.com/example-file/audio/ogg/example.ogg</a>
</audio>

Answer 1

这肯定是因为：

从ajax输出wp_audio_player()仅会提供HTML标记
我相信wp_audio_player()也会在正常调用时也将脚本（也许是CSS）添加到页面中，而无需使用ajax。

您可以尝试的方法：

尝试在您的PHP模板中放置另一个隐藏的wp_audio_player()以加载所需的脚本。它可以直接运行，或者您可能需要分析脚本以触发所需的内容。
您也可以按照here wp_enqueue_script( 'wp-mediaelement' );
如here所示，可以防止Wordpress加载those scripts（至少其中一些）

音频播放器：

为什么您需要一个Wordpress，却不能使用典型的HTML5音频播放器？

WP音频简码和AJAX

1 个答案: