使用自定义字段添加简单(一键)音频播放器?

时间:2016-11-01 作者:startToday

你能帮我找到一种方法,使用自定义字段在我的帖子中添加一个简单的音频播放器吗。播放器将只具有播放功能,不需要更多功能。

用例是在一些学习网站上发布新词汇,每个词汇都应该有发音。最终的结果将类似于此图像enter image description here

现在,我使用自定义字段,我知道如何获取自定义字段值。问题是,我不知道如何在这个简单的音频播放环境中展示这一点。

提前谢谢。

1 个回复
最合适的回答,由SO网友:ppajer 整理而成

最基本的情况是,您的页面需要有一个隐藏的<audio> 元素和一些javascript来触发播放。

您只需将每篇文章的音频文件的URL添加到自定义字段,然后调用get_post_meta() 将其绑定到播放器。然后在前端,您可以将单击处理程序绑定到播放预定义音频元素的按钮。

自定义字段(在本例中命名为audioURL)

http://absolute.url/to/audio/file.mp3

在模板文件中

<audio id="audioPlayer" src="<?php get_post_meta(get_the_ID(), \'audioURL\', true); ?>" preload="auto">
JavaScript
// Vanilla JS
document.getElementById(\'yourButtonID\').onclick = function() {
    document.getElementById(\'audioPlayer\').play();
}

// Or if you\'re using jQuery
$(\'#yourButtonID\').on(\'click\', function() {
    $(\'#audioPlayer\')[0].play();
})
希望这有帮助!

相关推荐

在WordPress 3.6的[AUDIO]短码中,‘PRELOAD=“NONE”’是有效参数吗?

我知道MediaElement。js是part of the WordPress core 在WordPress 3.6中。我目前使用MediaElement。我的WordPress 3.5.1网站上的js插件。在某些页面上,我们在一个页面上有几个播放器,我们需要指定preload=\"none\" 作为MediaElement中的参数。js短代码,因为如果我们不这样做,一些浏览器(主要是iOS设备)会尝试一次下载所有MP3文件。以下是我们当前使用的短代码:[audio mp3=\"filename.mp