公众号音乐自动播放html源码,微信浏览器中播放声音的正确姿势及html5中的audio标签...-程序员宅基地
技术标签： 公众号音乐自动播放html源码
标榜的正确姿势似乎还是不对。
状态是
wx.config({
// 配置信息
});
wx.ready(function () {
media.src = "http://a.f265.com/project/shake-money/img/shake.mp3"
media.play();
});
代码放在一起是可以的，代码分开，或调用别的JS SDK，就不行了。
测试了很久，始终无法实现。想起了以前的WeixinJSBridge，测试了一下，竟然成了。
var media = document.getElementById("musicBox");
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
WeixinJSBridge.invoke('getNetworkType', {}, function (res) {
// 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
// alert(res.err_msg);
media.play();
});
}
前端就是这么蛋碎。
===========以上内容2016年4月15日===========
在实际项目中需要在微信浏览器中播放声音。所以学习了一下html5中播放声音的一些相关知识。iOS Safari 不允许自动播放 audio，只能通过用户交互触发。
了解了基本的声音播放的属性和时间，开始写代码，比如html：
js代码：
var media = document.getElementById("musicBox");
if (!media.src) {
media.src = "http://a.f265.com/project/shake-money/img/shake.mp3"
}
media.play();
在pc浏览器下能正常播放，但是在微信页面中不行。尝试了好多姿势，就是播放不了声音。 想起了微信的JS SDK，找了一边也没有合适的接口。
实在没有办法了，索性在wx.ready(function () {...});中尝试了一下，结果成了！估计是微信浏览器做了一些特殊处理。
wx.config({
// 配置信息
});
wx.ready(function () {
media.src = "http://a.f265.com/project/shake-money/img/shake.mp3"
media.play();
});
附：audio标签及属性
认真学习了一下html5重点audio标签及属性：
属性
值
描述
autoplay
autoplay
如果出现该属性，则音频在就绪后马上播放。
controls
controls
如果出现该属性，则向用户显示控件，比如播放按钮。
loop
loop
如果出现该属性，则每当音频结束时重新开始播放。
muted
muted
规定视频输出应该被静音。
preload
preload
如果出现该属性，则音频在页面加载时进行加载，并预备播放。
如果使用 “autoplay”，则忽略该属性。
src
url
要播放的音频的 URL。
附：Media 事件
由媒介(比如视频、图像和音频)触发的事件(适用于所有 HTML 元素，但常见于媒介元素中，比如 、、、 以及 ):
属性
值
描述
onabort
script
在退出时运行的脚本。
oncanplay
script
当文件就绪可以开始播放时运行的脚本(缓冲已足够开始时)。
oncanplaythrough
script
当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。
ondurationchange
script
当媒介长度改变时运行的脚本。
onemptied
script
当发生故障并且文件突然不可用时运行的脚本(比如连接意外断开时)。
onended
script
当媒介已到达结尾时运行的脚本(可发送类似“感谢观看”之类的消息)。
onerror
script
当在文件加载期间发生错误时运行的脚本。
onloadeddata
script
当媒介数据已加载时运行的脚本。
onloadedmetadata
script
当元数据(比如分辨率和时长)被加载时运行的脚本。
onloadstart
script
在文件开始加载且未实际加载任何数据前运行的脚本。
onpause
script
当媒介被用户或程序暂停时运行的脚本。
onplay
script
当媒介已就绪可以开始播放时运行的脚本。
onplaying
script
当媒介已开始播放时运行的脚本。
onprogress
script
当浏览器正在获取媒介数据时运行的脚本。
onratechange
script
每当回放速率改变时运行的脚本(比如当用户切换到慢动作或快进模式)。
onreadystatechange
script
每当就绪状态改变时运行的脚本(就绪状态监测媒介数据的状态)。
onseeked
script
当 seeking 属性设置为 false(指示定位已结束)时运行的脚本。
onseeking
script
当 seeking 属性设置为 true(指示定位是活动的)时运行的脚本。
onstalled
script
在浏览器不论何种原因未能取回媒介数据时运行的脚本。
onsuspend
script
在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。
ontimeupdate
script
当播放位置改变时(比如当用户快进到媒介中一个不同的位置时)运行的脚本。
onvolumechange
script
每当音量改变时(包括将音量设置为静音)时运行的脚本。
onwaiting
script
当媒介已停止播放但打算继续播放时(比如当媒介暂停已缓冲更多数据)运行脚本
智能推荐
使用nginx解决浏览器跨域问题_nginx不停的xhr-程序员宅基地
文章浏览阅读1k次。通过使用ajax方法跨域请求是浏览器所不允许的，浏览器出于安全考虑是禁止的。警告信息如下：不过jQuery对跨域问题也有解决方案，使用jsonp的方式解决，方法如下：$.ajax({ async:false, url: 'http://www.mysite.com/demo.do', // 跨域URL ty..._nginx不停的xhr
在 Oracle 中配置 extproc 以访问 ST_Geometry-程序员宅基地
文章浏览阅读2k次。关于在 Oracle 中配置 extproc 以访问 ST_Geometry，也就是我们所说的 使用空间SQL 的方法，官方文档链接如下。http://desktop.arcgis.com/zh-cn/arcmap/latest/manage-data/gdbs-in-oracle/configure-oracle-extproc.htm其实简单总结一下，主要就分为以下几个步骤。..._extproc
Linux C++ gbk转为utf-8_linux c++ gbk->utf8-程序员宅基地
文章浏览阅读1.5w次。linux下没有上面的两个函数，需要使用函数 mbstowcs和wcstombsmbstowcs将多字节编码转换为宽字节编码wcstombs将宽字节编码转换为多字节编码这两个函数，转换过程中受到系统编码类型的影响，需要通过设置来设定转换前和转换后的编码类型。通过函数setlocale进行系统编码的设置。linux下输入命名locale -a查看系统支持的编码_linux c++ gbk->utf8
IMP-00009: 导出文件异常结束-程序员宅基地
文章浏览阅读750次。今天准备从生产库向测试库进行数据导入，结果在imp导入的时候遇到“ IMP-00009:导出文件异常结束” 错误，google一下，发现可能有如下原因导致imp的数据太大，没有写buffer和commit两个数据库字符集不同从低版本exp的dmp文件，向高版本imp导出的dmp文件出错传输dmp文件时，文件损坏解决办法：imp时指定..._imp-00009导出文件异常结束
python程序员需要深入掌握的技能_Python用数据说明程序员需要掌握的技能-程序员宅基地
文章浏览阅读143次。当下是一个大数据的时代，各个行业都离不开数据的支持。因此，网络爬虫就应运而生。网络爬虫当下最为火热的是Python，Python开发爬虫相对简单，而且功能库相当完善，力压众多开发语言。本次教程我们爬取前程无忧的招聘信息来分析Python程序员需要掌握那些编程技术。首先在谷歌浏览器打开前程无忧的首页，按F12打开浏览器的开发者工具。浏览器开发者工具是用于捕捉网站的请求信息，通过分析请求信息可以了解请..._初级python程序员能力要求
Spring @Service生成bean名称的规则（当类的名字是以两个或以上的大写字母开头的话，bean的名字会与类名保持一致）_@service beanname-程序员宅基地
文章浏览阅读7.6k次，点赞2次，收藏6次。@Service标注的bean，类名：ABDemoService查看源码后发现，原来是经过一个特殊处理：当类的名字是以两个或以上的大写字母开头的话，bean的名字会与类名保持一致public class AnnotationBeanNameGenerator implements BeanNameGenerator { private static final String C..._@service beanname
随便推点
二叉树的各种创建方法_二叉树的建立-程序员宅基地
文章浏览阅读6.9w次，点赞73次，收藏463次。1.前序创建#include<stdio.h>#include<string.h>#include<stdlib.h>#include<malloc.h>#include<iostream>#include<stack>#include<queue>using namespace std;typed_二叉树的建立
解决asp.net导出excel时中文文件名乱码_asp.net utf8 导出中文字符乱码-程序员宅基地
文章浏览阅读7.1k次。在Asp.net上使用Excel导出功能，如果文件名出现中文，便会以乱码视之。 解决方法： fileName = HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8);_asp.net utf8 导出中文字符乱码
笔记-编译原理-实验一-词法分析器设计_对pl/0作以下修改扩充。增加单词-程序员宅基地
文章浏览阅读2.1k次，点赞4次，收藏23次。第一次实验 词法分析实验报告设计思想词法分析的主要任务是根据文法的词汇表以及对应约定的编码进行一定的识别，找出文件中所有的合法的单词，并给出一定的信息作为最后的结果，用于后续语法分析程序的使用；本实验针对 PL/0 语言 的文法、词汇表编写一个词法分析程序，对于每个单词根据词汇表输出： (单词种类, 单词的值) 二元对。词汇表：种别编码单词符号助记符0beginb..._对pl/0作以下修改扩充。增加单词
android adb shell 权限,android adb shell权限被拒绝-程序员宅基地
文章浏览阅读773次。我在使用adb.exe时遇到了麻烦.我想使用与bash相同的adb.exe shell提示符,所以我决定更改默认的bash二进制文件(当然二进制文件是交叉编译的,一切都很完美)更改bash二进制文件遵循以下顺序> adb remount> adb push bash / system / bin /> adb shell> cd / system / bin> chm..._adb shell mv 权限
投影仪-相机标定_相机-投影仪标定-程序员宅基地
文章浏览阅读6.8k次，点赞12次，收藏125次。1. 单目相机标定引言相机标定已经研究多年，标定的算法可以分为基于摄影测量的标定和自标定。其中，应用最为广泛的还是张正友标定法。这是一种简单灵活、高鲁棒性、低成本的相机标定算法。仅需要一台相机和一块平面标定板构建相机标定系统，在标定过程中，相机拍摄多个角度下（至少两个角度，推荐10~20个角度）的标定板图像（相机和标定板都可以移动），即可对相机的内外参数进行标定。下面介绍张氏标定法（以下也这么称呼）的原理。原理相机模型和单应矩阵相机标定，就是对相机的内外参数进行计算的过程，从而得到物体到图像的投影_相机-投影仪标定
Wayland架构、渲染、硬件支持-程序员宅基地
文章浏览阅读2.2k次。文章目录Wayland 架构Wayland 渲染Wayland的 硬件支持简 述： 翻译一篇关于和 wayland 有关的技术文章, 其英文标题为Wayland Architecture .Wayland 架构若是想要更好的理解 Wayland 架构及其与 X (X11 or X Window System) 结构；一种很好的方法是将事件从输入设备就开始跟踪, 查看期间所有的屏幕上出现的变化。这就是我们现在对 X 的理解。 内核是从一个输入设备中获取一个事件，并通过 evdev 输入_wayland