解决audio标签样式问题及ios自动播放问题

解决audio标签样式问题及ios自动播放问题

html代码如下，ios的audio标签好像不支持ogg文件播放，在微信端放了ogg音频文件，都无法播放，因此改用MP3文件。

设置为display:none，隐藏掉音频组件，增加额外组件样式，用于控制音频的播放。

引入了一张音符图片，增加css3样式，使图片旋转起来，增加动态效果，其中rotateclass主要控制图片的旋转。代码如下

[

复制代码

](javascript:void(0); "复制代码")

.rotateClass{ -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); transform:translate3d(0,0,0);
 /* 设置动画，animation:动画名称 动画播放时长单位秒或微秒 动画播放的速度曲线linear为匀速 动画播放次数infinite为循环播放; / -webkit-animation:play 3s linear infinite; -moz-animation:play 3s linear infinite; animation:play 3s linear infinite;
 } @-webkit-keyframes play{ 0% { / 水平翻转 /
 /-webkit-transform:rotateY(0deg);/
 / 垂直翻转
 -webkit-transform:rotateX(0deg);
 顺时针旋转
 -webkit-transform:rotate(0deg);
 逆时针旋转
 -webkit-transform:rotate(0deg); / -webkit-transform:rotateX(0deg);
 } 100% { -webkit-transform:rotate(360deg);
 / 水平翻转 /
 /-webkit-transform:rotateY(360deg);/
 / 垂直翻转
 -webkit-transform:rotateX(360deg);
 顺时针旋转
 -webkit-transform:rotate(360deg);
 逆时针旋转
 -webkit-transform:rotate(-360deg); /
 } }
 @-moz-keyframes play{ 0% {
 -moz-transform:rotate(0deg);
 /-moz-transform:rotateY(0deg);/
 / -moz-transform:rotateX(0deg);
 -moz-transform:rotate(0deg);
 -moz-transform:rotate(0deg); /
 } 100% { -moz-transform:rotate(360deg);
 /-moz-transform:rotateY(360deg);/
 / -moz-transform:rotateX(360deg);
 -moz-transform:rotate(360deg);
 -moz-transform:rotate(-360deg); /
 } }
 @keyframes play{ 0% {
 transform:rotate(0deg);
 / transform:rotateY(0deg);/
 / transform:rotateX(0deg);
 transform:rotate(0deg);
 transform:rotate(0deg); /
 } 100% { transform:rotate(360deg);
 / transform:rotateY(360deg);/
 / transform:rotateX(360deg);
 transform:rotate(360deg);
 transform:rotate(-360deg); */
 }

[

复制代码

](javascript:void(0); "复制代码")

用JS控制，当歌曲播放时，图片自动旋转，歌曲停止后，图片旋转停止。JS代码如下：

[

复制代码

](javascript:void(0); "复制代码")

[

复制代码

](javascript:void(0); "复制代码")

至此，代码在安卓机和PC端上运行正常，但在IOS系统上会出现无法播放的情况。查阅了相关资料，需引入微信API接口，用JS控制代码如下：

[

复制代码

](javascript:void(0); "复制代码")

[

复制代码

](javascript:void(0); "复制代码")

至此阶段，经测试，代码运行正常。