使用微信API实现H5页面播放音频文件

之前在处理H5页面播放音频文件的时候，总是需要搞一个https才能正常播放，一次无意浏览到了一个自动播放音频的页面，发现了使用微信Api可以不使用https也能播放音频文件。作为记录，简单页面实现如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><audio hidden="hidden" id="audio"><source src="alcohol.mp3" type="audio/mp3"><embed height="50px" width="100px" src="alcohol.mp3"></audio><script src=”http://libs.baidu.com/jquery/2.1.1/jquery.min.js”></script><script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script><script type="text/javascript">wx.config({debug: false,appId: 'wxcee5eba3aba35e35',timestamp: 1559524606,nonceStr: 'fd6e1bfe6ead430db24a9bba4afbbc5f',signature: '7f3c14f2817f58321e7cce1ecc7c682bc4ad95c2',jsApiList: ['checkJsApi','getLocation']});// setTimeout("getLocation()","3000");wx.ready(function(){});Orderprocessing();function autoPlayAudio() {wx.ready(function() {// document.getElementById('audio').play();var vid = document.getElementById("audio");//获取音频对象vid.play();});}function Orderprocessing(){var vid = document.getElementById("audio");//获取音频对象var start = 0;//定义循环的变量var times=3;//定于循环的次数autoPlayAudio(vid);if(vid.paused) {vid.play();// 这个就是播放}vid.addEventListener("ended",function() {autoPlayAudio(vid);if(vid.paused)                     {vid.play();// 这个就是播放}start++;//循环start == times && vid.pause();//也就是当循环的变量等于次数的时候，就会终止循环并且关掉音频});}</script>
</body>
</html>

注意：其中使用的音频文件请自己替换。

使用微信API实现H5页面播放音频文件相关推荐

h5 audio播放音频文件
h5 audio播放音频文件注:下面html中样式及不相关的内容去掉了第一个例子播放没有防盗链的外网音频文件是可以的 <!doctype html> <html> < ...
微信公众号H5页面开发--微信JS-SDK引用
微信公众号H5页面开发–微信JS-SDK引用微信提供了微信公众号开发者手册,官方地址:https://mp.weixin.qq.com/ 公众号内许多复杂的业务场景,都是通过网页形式来提供服务,这时 ...
前端实现微信公众号h5页面跳转小程序-成功案例
微信公众号h5页面跳转小程序-成功案例微信公众号h5页面跳转小程序-成功案例,标题已经明确说明,h5页面可以正常跳转微信小程序官网说可以,不是我说的文章目录微信公众号h5页面跳转小程序-成功案 ...
微信公众号H5页面支付JSAPI
1:在微信环境下,我们需要获取到code,拿code去获取openid,在获取openid的时候有2种参数分别是:snsapi_base和snsapi_userinfo,snsapi_base只为获取 ...
微信公众号h5页面跳转小程序
微信公众号h5页面跳转小程序文章目录微信公众号h5页面跳转小程序前言一.注意二.使用步骤步骤一:绑定域名步骤二:引入环境步骤三:初始配置前言问:h5 页面可以跳转至微信小程序吗? ...
ArcGIS API for Silverlight 当DataGrid选中项时，地图聚焦弹出窗口，并可以播放音频文件...
原文:ArcGIS API for Silverlight 当DataGrid选中项时,地图聚焦弹出窗口,并可以播放音频文件先看效果图,然后上代码: <UserControl x:Class= ...
微信内置浏览器调试和调试微信内的H5页面汇总（持续更新...)
调试PC端微信内置浏览器(只支持3.2.1以下的) (1)添加以下代码, 查看chrome版本和内核安放位置 <html><script type="text/javasc ...
利用python生成微信h5_Python + Appium 微信公众号 H5 页面自动化测试
本文内容在以下环境运行成功: Windows10 Python2.7 android-sdk_r24.4.1 Appium-windows-1.15.1 chromedriver_2.40 小米手机 ...
关于微信支付由H5页面修改为类似于微信支付手机充值的效果
上周由于工作需要,需将微信支付的H5页面跳转修改为AJAX点击后直接出发的效果.下面是之前采用的微信支付的JS代码: function onBridgeReady(){WeixinJSBridge.i ...

使用微信API实现H5页面播放音频文件

使用微信API实现H5页面播放音频文件相关推荐

最新文章

热门文章