我正在尝试使用 http://kolber.github.io/audiojs/demos/test6.html 中的 audio.js 将 mp3 模块集成到我的 opencart 商店中.所以我按照 http://forum.opencart.com/viewtopic.php?t=80116&p=372808 中提到的步骤进行操作代码有问题,所以我修复了它。
但问题是当我加载页面时出现以下错误
Error loading: "undefined"
当我点击播放列表中的一首歌曲并点击播放器时,它会播放这首歌曲。但它仍然说未定义。
其实应该是这样的
下面是代码 标题.tpl
<script src="/js/audiojs/audio.min.js"></script>
<script>
$(function() {
// Setup the player to autoplay the next track
var a = audiojs.createAll({
trackEnded: function() {
var next = $('ol li.playing').next();
if (!next.length) next = $('ol li').first();
next.addClass('playing').siblings().removeClass('playing');
audio.load($('a', next).attr('data-src'));
audio.play();
}
});
// Load in the first track
var audio = a[0];
first = $('ol a').attr('data-src');
$('ol li').first().addClass('playing');
audio.load(first);
// Load in a track on click
$('ol li').click(function(e) {
e.preventDefault();
$(this).addClass('playing').siblings().removeClass('playing');
audio.load($('a', this).attr('data-src'));
audio.play();
});
// Keyboard shortcuts
$(document).keydown(function(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
// right arrow
if (unicode == 39) {
var next = $('li.playing').next();
if (!next.length) next = $('ol li').first();
next.click();
// back arrow
} else if (unicode == 37) {
var prev = $('li.playing').prev();
if (!prev.length) prev = $('ol li').last();
prev.click();
// spacebar
} else if (unicode == 32) {
audio.playPause();
}
})
});
</script>
在产品.tpl
<?php // Start of player ?>
<?php if ($attribute_groups) { ?>
<?php foreach ($attribute_group['attribute'] as $attribute) { ?>
<?php if ($attribute_group['name'] == 'Demo Tracks') { ?>
<div class="player">
<audio preload></audio>
<ol>
<?php foreach ($attribute_group['attribute'] as $attribute) { ?>
<?php //split name
$track = strtok($attribute['text'],"~");
?>
<?php while ($track !== false) {
// probably a better way, but put the 2 into diff vars
$track_url = $track;
$track = strtok('~');
$track_desc = $track;
$track = strtok('~');
?>.
<li>
<a href="#" data-src="<?php echo html_entity_decode($track_url); ?>"><?php echo $track_desc ?>
<?php } // end while ?>
<?php } // end foreach?>
</ol>
</div>
<?php } //if attribute_group ?>
<?php } ?>
<?php } //if attribute ?>
我们将不胜感激。
最佳答案
看看你的 JS 代码,我可以看到你只使用了这样的选择器
$('ol li')
这将找到所有 <li>
<ol>
中的元素元素。虽然这通常可以正常工作,但很可能在您的模板中还有另一个 <ol><li>
不包含您的播放列表条目。
使用 class
可以快速解决这个问题或 id
播放列表的属性 <ol>
,所以它看起来像<ol id="playlist">
.那么唯一选择器将是
$('ol#playlist li')
关于javascript - 使用 Opencart 加载 : "undefined" when using audio. js 以显示音频播放列表时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26023611/