jQuery音频播放器AUDIOPLAYER.JS

插件说明: jQuery音频播放器AUDIOPLAYER.JS免费，重量轻，移动优先

几个月前，我构建了一个自定义HTML代码，用一个

快速响应.

要实现此目标，CSS负有全部责任. 我的例子是快速反应. 您可以有反应迟钝的播放器，但我们不建议您这样做. 响应能力是获得良好网络体验的重要标志.

可触摸.

可触摸性是良好的Web体验和重要标志. 其中有两种，您独立于设备和屏幕. 这是完成的工作的一半

自适应.

当浏览器不完全支持音频元素或提供的任何音频文件时，播放器随后将其优雅地降低到一个按钮（仅用于播放/暂停按钮）基于该元素的播放器将使用（在Mac上是最快的时间音频播放器，Windows上的Windows Media Player第三方插件可以播放音频文件. 另一种可能的情况是: 浏览器中禁用了JavaScript. 浏览器的默认播放器将再次执行操作. 这完全没问题.

可用.

基本/播放/暂停和播放进度控制，提高/降低/提高/降低音量和指示，音频预加载（缓冲）.

无图像.

这也取决于您的CSS. 我的播放器似乎全都是CSS，并且不使用单个图像文件. 带有em单位的所有部件都会使播放器缩放.

不闪光.

这么久，闪烁. 这里不需要您.

亮度.

该插件的最新版本只有4 KB.

添加音频元素，设置所需的属性并添加源. 您将添加更多不同的来源，更多的用户将能够收听您的音频（因为在所有浏览器中均不支持单一音频格式）. 三个例子:

<audio src="audio.wav" preload="auto" controls></audio>

这只是预加载audio.wav文件音频播放器，直到用户单击播放按钮才播放它. nonemetadata）其他预加载值不会预加载文件.

自动播放时，它将加载文件，然后以这种方式循环播放:

指定多种音频格式以解决上述问题:

<audio preload="auto" controls>
    <source src="audio.wav" />
    <source src="audio.mp3" />
    <source src="audio.ogg" />
</audio>

神秘的控制？这是一个布尔属性，不会以任何方式影响插件，但可以确保浏览器的默认播放器显示并显示控件以及禁用JavaScript的控件.

最后一步调用插件（包括文档中的jQuery和插件文件）

<audio src="audio.wav" preload="auto" controls></audio>
<script src="jquery.js"></script>
<script src="audioplayer.js"></script>
<script>
    $( function()
    {
        $( audio ).audioPlayer();
    });
</script>

插件，一些可选参数. 最重要的一个称为classPrefix. 传递的值将成为子元素的父元素以及以类名为前缀的类名. 其他选项可能只会使英语以外的其他语言受益. 默认值的示例:

$( audio ).audioPlayer(
{
    classPrefix: audioplayer,
    strPlay: Play,
    strPause: Pause,
    strVolume: Volume
});

HTML

在第一段中，当我调用插件时，我用一些HTML替换了

<div class="audioplayer audioplayer-stopped">
	<audio src="audio.wav" preload="auto" controls></audio>
	<div class="audioplayer-playpause" title="Play"><a href="#">Play</a></div>
	<div class="audioplayer-time audioplayer-time-current">00:00</div>
	<div class="audioplayer-bar">
		<div class="audioplayer-bar-loaded"></div>
		<div class="audioplayer-bar-played"></div>
	</div>
	<div class="audioplayer-time audioplayer-time-duration">&hellip;</div>
	<div class="audioplayer-volume">
		<div class="audioplayer-volume-button" title="Volume"><a href="#">Volume</a></div>
		<div class="audioplayer-volume-adjust"><div><div></div></div></div>
	</div>
</div>

有些类名称已分配给父元素:

音乐播放器版本-正在播放音频

<div class="audioplayer audioplayer-playing">

停止音乐播放器的版本―音频

<div class="audioplayer audioplayer-stopped">

静音音乐播放器版本-音量已静音

<div class="audioplayer audioplayer-muted">

音乐播放器的novolume版本― ―无法进行音量调节:

<div class="audioplayer audioplayer-novolume">

重要说明: 当不支持音频元素或浏览器不兼容给定的音频文件时，播放器切换到迷你模式，基本上减少了播放器的播放/暂停按钮（因为“嵌入”元素的操作受到限制）: <

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-183289-1.html