Javascript WP音频短代码和AJAX

我想通过AJAX使用函数

wp\u audio\u 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>

功能wp_音频_播放器（）{
$ogg_文件=”https://cdn.online-convert.com/example-file/audio/ogg/example.ogg";
$attr=数组(
'src'=>$ogg_文件，
'循环'=>''，
“自动播放”=>“”，
“预加载”=>“无”
);
返回wp_音频_短代码（$attr）；
}
回声wp_音频_播放器（）；
//返回此html代码：
00:00
00:00
00:00

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>

//PHP
添加动作（“wp_ajax_wp_audio_player”，“wp_audio_player_ajax”）；
添加动作（“wp_ajax_nopriv_wp_audio_player”、“wp_audio_player_ajax”）；
函数wp_audio_player_ajax（）{
$ogg_文件=”https://cdn.online-convert.com/example-file/audio/ogg/example.ogg";
$attr=数组(
'src'=>$ogg_文件，
'循环'=>''，
“自动播放”=>“”，
“预加载”=>“无”
);
回声wp_音频_短码（$attr）；
模具（）；
}
//Javascript
jQuery.ajax({
类型：“POST”，
url:AJAX\uURL，
数据：{
动作：“wp_音频_播放器”，
},
成功：功能（数据）{
警报（数据）；
}
});
//返回此html代码：
这当然是因为：


从ajax输出
wp\u audio\u player（）
，只会给出HTML标记
我相信
wp\u audio\u player（）
在正常调用时也会向页面添加脚本（可能是css），而无需ajax

您可以尝试：


尝试在PHP模板中放置另一个隐藏的
wp\u audio\u player（）
，以加载所需的脚本。它可以直接工作，也可以需要分析脚本以触发所需内容


您还可以将其作为
wp_enqueue_脚本（'wp mediaelement'）进行排队


正如所见，可以防止Wordpress加载（至少有一些）



音频播放器：


为什么您需要Wordpress one，而不能使用典型的HTML5音频播放器
您从何处获得“//返回此html代码：”？在代码源页面中，您可以从原始的
wp\u audio\u shortcode（）
函数中复制代码，并根据需要进行调整/清理。它位于
wp includes/media.php
file@brasofilo我认为这是行不通的，因为真正的工作是由JavaScript而不是PHP完成的。前端的Mejs正在动态重写DOM HTML媒体元素，因此后端不存在相关代码。我认为问题在于处理是在文档就绪时完成的，而不是在以后动态注入媒体元素时完成的。@magenta，哦，是的，当然可以！短代码加载脚本
'wp-mediaelement'
。好吧，OP可以在AJAX之后做动态。。。但只有通过测试，Mustapha Fersaoui可以通过使用浏览器开发工具并验证JavaScript文件mediaelement.js是否已加载，轻松检查问题是否存在。我已经有一段时间没有与mejs合作了，但我认为问题会有所不同——mejs实际上重写了playerdom元素。不幸的是，它仅在最初加载HTML文档时才执行此操作，因此不会处理随后动态插入的播放器。我知道有一个解决办法，但我需要查看我现在使用的机器上没有的源代码。这就是我的想法。我尝试了几种方法，但都不成功。如果我没有找到任何解决方案，我可能会使用HTML5音频播放器等待解决方案。如果你能帮我检查一下你的源代码，我会很高兴：）。学习JS代码应该可以找到好的函数来调用。由于原始脚本确实“onDocumentReady”，您“只”需要在脚本中调用相同的方法。请参阅-$（'.wp audio shortcode、.wp video shortcode'）。而不是（'.mejs container'）。筛选器（function（）{return！$（this）.parent（）.hasClass（'mejs-mediaelement'；}）。mediaelementplayer（设置）；-接近底部。我认为这比只做window.wp.mediaelement.initialize（）容易；在将媒体元素插入DOM之后。initialize（）的编写方式是，再次调用它可能不会造成任何伤害，除了在已经创建时通过重新创建设置来浪费CPU周期。