[微信音频播放器] html5 audio 制作的微信播放器

news/2023/12/9 7:02:39

weixinAudio.js

一个简单的微信样式播放器

播放器DOM及CSS是微信里内置的音频播放器的样式,重新创建了控制层js,方便在在公众号,APP等场景使用。

例子

demo

地址

github

如何使用

通过以下demo来实现

HTML模板

<p class="weixinAudo">
    <audio src="../sound/sound.mp3" id="media" width="1" height="1" preload></audio>
    <span id="audio_area" class="db audio_area">
        <span class="audio_wrp db">
            <span class="audio_play_area">
                <i class="icon_audio_default"></i>
                <i class="icon_audio_playing"></i>
            </span>
            <span id="audio_length" class="audio_length tips_global">3:07</span>
            <span class="db audio_info_area">
                <strong class="db audio_title">标题</strong>
                <span class="audio_source tips_global">来源</span>
            </span>
            <span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
         </span>
    </span>
</p>

Js调用

//你需要先引入一个jQuery
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/weixinAudip.js"></script>
<script>
   $('.weixinAudo').weixinAudio(options);
</script>

options/初始化参数

OptionTypeDefaultDescription
autoplayBooleanfalse播放器是否在初始化时自动播放
srcString如果audio标签上没设定src属性,可在初始化时设置

API/执行方法

MethodParametersDescription
play()播放方法
pause()暂停方法
changsrc()src,callback src:播放的地址;callback:回调函数

http://www.niftyadmin.cn/n/4545315.html

相关文章

Vue-编译打包:npm run build:prod

Vue项目打包命令&#xff1a;npm run build:prod 等编译后的文件会出现在项目中的“dist”文件夹中。 就这么简单

.NetCore中使用Swagger文档自动生成API接口及注释

1、创建一个.NetCore WebApi项目 2、使用Nuget安装Swagger&#xff0c;安装的命令是: Install-Package Swashbuckle.AspNetCore -Pre 3、安装完Swagger插件之后&#xff0c;在Startup.cs文件中的ConfigureServices方法和Configure方法注册并使用Swagger服务。 在ConfigureSer…

几何画板中该如何插入公式

在使用几何画板制作课件的过程中&#xff0c;可能会经常使用到某些数学公式或符号&#xff0c;那么该如何将数学公式插入到几何画板呢&#xff1f;下面给大家介绍两种方法&#xff0c;都是非常实用的&#xff0c;希望对大家学习几何画板有帮助。 方法一 导入法 像导入外部图片一…

IIS利用HTTP重定向指定网站首页

1、打开“HTTP重定向”功能 、 2、三个复选框都打钩&#xff0c;输入框内填入指定的页面&#xff0c;然后点击应用 3、最后重启网站&#xff0c;在地址框内输入“m.xmbygy.com”就会自动跳转到“m.xmbygy.com/swagger/index.html”

IIS安装HTTP重定向功能

打开“添加角色和功能向导”&#xff0c;在服务器角色里面如下图所示&#xff0c;选中“HTTP重定向”&#xff0c;然后一直点下一步就行了

Android最佳Mock单元测试方案:Junit + Mockito + Powermock

本文旨在从实践出发&#xff0c;引导开发者在Android项目中进行Mock单元测试。 什么是单元测试 单元测试由一组独立的测试构成&#xff0c;每个测试针对软件中的一个单独的程序单元。单元测试并非检查程序单元之间是否能够合作良好&#xff0c;而是检查单个程序单元行为是否正确…

两句话简单明了的弄清Asp.Net和Asp.NetCore的区别

1、Asp.Net就是全家桶什么都有&#xff0c;你需要的都有&#xff0c;不需要的也有&#xff0c;既省心也糟心。 2、Asp.NetCore就是自选式&#xff0c;只要有个最简约的设计&#xff0c;需要什么就配置什么&#xff0c;虽麻烦但高效。

.NetCore内置IOC的使用

使用.NetCore内置的IOC&#xff1a;抽象-实现-注册-使用 1、新建接口类“IBasicDataService.cs” public interface IBasicDataService{List<BasicData> GetAllBasicData();BasicData GetDataByPhoneNum(string phoneNum);} 2、新建实现类“BasicDataService.cs” pub…

微信小程序自定义双击、三击、N击事件

声明两个参数 data: {clickNum:1,lastTapTime:0,} 单击事件&#xff1a; btnclick:function(e){var methis;var curTime e.timeStamp //获取时间戳var lastTime me.data.lastTapTime; //第一次获取为零console.log("上一次点击时间&#xff1a;"lastTime)console…

实习日记7.29

今天是实习的最后一天&#xff0c;我也没有再学习新的知识&#xff0c;而是把昨天学的东西大概的汇总一下&#xff0c;巩固一下并且完成一个任务。 这是软件编辑的界面。 这是打开网页以后的界面。中间还是有些地方忘记了&#xff0c;总的来说任务算是完成了。 在公司做了一些收…

.Net Core的优势

1、开源、跨平台&#xff1a;.NET Core 是开放源代码通用开发平台&#xff0c;由 Microsoft 和 .NET 社区在 GitHub 上共同维护。 它跨平台&#xff08;支持 Windows、macOS 和 Linux&#xff09;&#xff0c;用于构建web应用、IOT应用和移动后端应用。 2、性能优越。据.net c…

进程和线程的解释

1、什么是进程&#xff1f; 当一个程序开始运行时&#xff0c;他就是一个进程&#xff0c;进程包括进行中的程序和程序所使用到的内存和系统资源&#xff0c;而进程又是由多个线程所组成的。2、什么是线程&#xff1f; 线程是程序中的一个执行流&#xff0c;每个线程都…

hadoop程序MapReduce之MaxTemperature

需求&#xff1a;求每年当中最高的温度 样本&#xff1a;temp.log 2016080623 2016072330 2015030420 输出结果&#xff1a;2016 30 2015 20 MapReduce分析设计&#xff1a; Mapper分析设计&#xff1a; 1、将文件分割成键值队<k1,v1>&#xff0c;k1代表&#xff1a;行位…

Invoke、BeginInvoke和EndInvoke用法

先看代码&#xff1a; Action act () >{Console.WriteLine("我是无参无返回值");};Func<int> func () >{Thread.Sleep(5000);Console.WriteLine("等了两秒执行");return 10;};act.Invoke();IAsyncResult asyncResult func.BeginInvoke(null…

Django-linux主机计划任务查看服务

目录 需求 功能介绍 页面效果 代码编写 docker部署 需求 线上主机一百台左右&#xff0c;经常会在某个服务器上放置一些自动化脚本&#xff0c;并配置计划任务&#xff0c;时间长可能忘记计划任务所在服务器&#xff0c;所以开发一个用于收集展示crontab任务的服务 语言框…

时间和天数相加并格式化

比如&#xff0c;Wed Jun 10 2020 15:34:52 GMT0800 (中国标准时间)32天后是几月几号&#xff0c;上代码&#xff1a; //计算失效时间ConvertData(date,number){console.log("date:",date)//目前的时间console.log("number:",number)//相加的天数try {date…
最新文章