我正在对一个使用audio.js作为音频播放器的网站进行故障排除。我正在尝试使用单击方法配置音频播放器的事件回调,但它无法识别我的单击。然而,它确实像在这个jsfiddle上一样工作。非常感谢任何帮助
我所做的删除了所有CSS和不相关的脚本。Click方法适用于audiojs类前后的div。
我正在为音频播放器使用的短代码-
// audio player
add_shortcode( 'sp_audio', 'sp_audio_shortcode' );
function sp_audio_shortcode( $atts, $contents = null )
{
extract( shortcode_atts( array(
'id' => 'sp-audio-player',
'url' => '',
),
$atts ) );
$output .= '<audio preload="none">';
$output .= '<source src="' . $url . '" type="audio/mpeg">';
$output .= '</audio>';
return $output;
}
Chrome检测元件中的输出
<div class="musicplayer">
<div class="audiojs" classname="audiojs" id="audiojs_wrapper5">
<audio preload="none">
<source src="http://soundtrackloops.com/Demo/Electronisounds-AcousticBarefootBeats-DEMO.mp3" type="audio/mpeg">
</audio>
<div class="play-pause">
<p class="play"></p>
<p class="pause"></p>
<p class="loading"></p>
<p class="error"></p>
</div>
<div class="scrubber">
<div class="progress"></div>
<div class="loaded"></div>
</div>
<div class="time">
<em class="played">00:00</em>/<strong class="duration">00:00</strong>
</div>
<div class="error-message"></div>
</div>
我的测试点击方法
jQuery(document).ready(function($) {
$( ".audiojs" ).click(function() {
alert( "CLICK" );
});
初始化audio.js
audiojs.events.ready(function() {
audiojs.createAll();
});
看起来你是在页面加载后附加音轨,所以你需要使用实时点击事件。
试试这个:
jQuery(document).ready(function($) {
$('.audiojs').live('click', function() {
alert( "CLICK" );
});
我遇到了类似的问题,并通过在音频对象上使用事件侦听器解决了这个问题。我想这取决于你想要跟踪什么,但这让你可以控制播放和停止等。
我修改了我的代码,所以它应该能与你的一起工作
audiojs.events.ready(function() {
var as = audiojs.createAll();
$(".audiojs audio").on('playing',function(){
console.log("Push playing");
});
// Other callbacks
});
希望你能把它发挥作用。我每页只有一个播放器,如果你有更多的播放器,只需在回调中使用$(this)元素来识别哪个被更改了。