索鸟网

  1. 首页
  2. 原生js 编写的微信播放器插件(仿微信公众号播放器组件)

原生js 编写的微信播放器插件(仿微信公众号播放器组件)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <link rel="stylesheet" href="http://www.daiwei.org/components/wx-audio/css/wx-audio.css">
</head>
<body>
    <div id="textaudio"></div>
</body>
<script src="http://www.daiwei.org/components/wx-audio/js/wx-audio.js"></script>
<script>
    var wxAudio = new Wxaudio({
        ele: "#textaudio",
        title: "河山大好",
        disc: "许嵩",
        src: "http://oiq8j9er1.bkt.clouddn.com/%E8%AE%B8%E5%B5%A9%20-%20%E6%B2%B3%E5%B1%B1%E5%A4%A7%E5%A5%BD1.mp3",
        width: "320px"
    });
</script>
</html>

复制上方代码在本地html中,执行即可得到下方效果

图片描述

实例化的wxAudio可以这样操作

wxAudio.audioPlay() // 播放

wxAudio.audioPause() // 暂停

wxAudio.audioPlayPause() // 播放暂停

wxAudio.showLoading(bool) //显示加载状态 参数bool

wxAudio的audioCut(src,title,disc) 实现音频切换的效果

github地址: https://github.com/IFmiss/wx-audio 欢迎交流star
在线演示地址: http://www.daiwei.org/components/wx-audio/html/audio.html

相关标签: JavaScript Sass/Less

来源地址:http://www.imooc.com/article/20378 版权归作者所有!

相关教程

  • nodejs微信公众号开发之微信开放的JS接口

    这篇文章会一步一步带你,用 nodejs 实现微信公众号的分享接口。微信分享接口,需要认证的公众号才能调用。并且设置JS接口安全域名后,公众号开发者可在该域名下调用微信开放的JS接口。 配置安全域名 登录公众号,在 公众号设置 - 功能设置 - JS接口安全域名 中添加上你自己的调用域名。 官方文档 https://mp.weixin.qq.com/wiki?t=res
  • 个人怎么申请微信公众号-微信公众号使用教程33

    在以前的《秦子恒微信课堂》中, 子恒老师介绍公众号是以公司申请并认证的, 但是随着公众号的普及, 很多个人也申请了公众号, 并且运营得非常好。 有学员问是否可以介绍下个人公众号方面的内容, 今天子恒老师跟你分享, 个人怎么申请公众号, 未必有视频演示, 更容易理解。 一、 个人申请公众号的优缺点
  • nodejs微信公众号开发——1.接入微信公众号

    接入微信公众号是开发的第一步,万事开头难,走好第一步,后面的路就更宽广。(项目github地:https://github.com/Panfen/wem... ) 1.公众平台测试帐号的使用 登录微信公众平台,由于很多开发人员并没有认证的的微信公众号,所以比较折中的方式是使用公众平台测试帐号来测试功能,其优势是能够测试微信公众号的绝大部分功能,不受认证门
  • 怎么申请开通微信公众号支付-微信公众号使用教程28

    有次去吃饭, 结账的时候, 看到前台有个标牌, 写着‘微信支付’, 一问服务号才知道, 这个餐厅可以用微信付款。 微信支付不仅可以用在线下, 而且还可以用在 线上。 当你的产品和服务可以使用微信支付时, 缩短了客户的购买流程, 又极大的方便了客户, 因为不用带钱包, 只需要带手机就算可以。 怎么申请开通微信公众号支付视频教程在线观看
  • 微信公众平台编辑器教程-微信公众号使用教程32

    用微信公众号后台写文章, 进行排版时, 会发现一个尴尬的问题: 我们想要让文章的样式丰富些, 而微信编辑器提供给我们的样式功能却非常少。 但是你又发现有些公众号的文章排版却很漂亮, 有动态图片, 彩色样式, 指引小图标 … 这些内容排版是怎么实现的呢? 今天子恒老师就介绍一款微信编辑神器给你,
  • 怎么认证微信服务号-微信公众号使用教程27

    当你注册好微信服务号后, 要想使用服务号强大的功能, 就必须先对服务号认证。 只有你的服务号通过了认证, 才能使用服务号开发,微信小店,微信支付这些功能… 认证服务号需要什么材料, 认证流程怎么样, 微信服务号认证需要多少钱… 怎么认证微信服务号视频教程在线观看
  • 微信公众号接口开发心得

    1 仔细阅读开发者文档,逻辑关系要捋顺. 2 appid, appsecret, mch_id, key 之间的关系要弄清. 3 统一下单api传xml格式. 4 当签名错误产生时,一定要先检查各个字段的key和value书写是否正确,也要注意key和mch_id是否匹配. 5 微信返回的数据只能发送到服务端(Ajax无效) 6 生成签名时可以用签名校验工具生成. as
  • 微信公众号开发之三利器

    声明:发布此文主要是希望能帮助到刚接触微信开发的同学。刚开始写文章,如有大神路过希望提出不足之处。谢谢!! 微信公众号开发之前需要准备三个利器。 微信公众平台接口测试帐号 内网穿透工具 微信开发者工具 一、 微信公众平台接口测试帐号 由于用户体验和安全性方面的考虑,微信公众号的注册有一定门槛,某些高级接口的权限需要微信认证后才可以获取。所以,为了