js微信语音怎么实现的

html-css07

js微信语音怎么实现的,第1张

我的html结构是这样的

class="app-voice-you" voiceSrc="xx.mp3">

class="app-voice-headimg" src="xx.png" />

style="width: 60%" class="app-voice-state-bg">

class="app-voice-state app-voice-pause">

class="app-voice-time app-voice-unread">

1'6"

id="audio_my" src="">

Your browser does not support the audio tag.

核心功能就是语音播放,主要包括了以下几个功能点:

红点表明未听语音,语音听过后,红点会消失

将“未读”状态的样式独立出来,“已读”的时候,把样式删除就行。结合本地存储处理就搞定了。

//this是点击的语音的document

var app_voice_time = this.getElementsByClassName("app-voice-time")[0]

if(app_voice_time.className.indexOf("app-voice-unread") != -1){

//存在红点时,把红点样式删除

app_voice_time.className = app_voice_time.className.replace("app-voice-unread","")

}

第一次听语音,会自动播放下一段语音

这里主要是使用HTML5的audio控件的“语音播放完”事件

语音播放完,找到下一个语音,播放下一个语音

//语音播放完事件(PAGE.audio是audio控件的document)

PAGE.audio.addEventListener('ended', function () {

//循环获取下一个节点

PAGE.preVoice = PAGE.currentVoice

var currentVoice = PAGE.currentVoice

while(true){

currentVoice = currentVoice.nextElementSibling//下一个兄弟节点

//已经到达最底部

if(!currentVoice){

PAGE.preVoice.getElementsByClassName("app-voice-state")[0].className = "app-voice-state app-voice-pause"

return false

}

var voiceSrc = currentVoice.getAttribute("voiceSrc")

if(voiceSrc &&voiceSrc != ""){

break

}

}

if(!PAGE.autoNextVoice){

PAGE.preVoice.getElementsByClassName("app-voice-state")[0].className = "app-voice-state app-voice-pause"

return false

}

PAGE.currentVoice = currentVoice

//获取得到下一个语音节点,播放

PAGE.audio.src = voiceSrc

PAGE.audio.play()

PAGE.Event_PlayVoice()

}, false)

每段语音可以暂停、继续播放、重新播放

这个比较简单,但是也是比较多逻辑。需要变换样式告诉用户,怎样是继续播放/重新播放。

播放中的语音有动画,不是播放中的语音则会停止动画。

这里主要是CSS3动画的应用

.app-voice-pause,.app-voice-play{

height: 18px

background-repeat: no-repeat

background-image: url(../img/voice.png)

background-size: 18px auto

opacity: 0.5

}

.app-voice-you .app-voice-pause{

/*从未播放*/

background-position: 0px -39px

}

.app-voice-you .app-voice-play{

/*播放中(不需要过渡动画)*/

background-position: 0px -39px

-webkit-animation: voiceplay 1s infinite step-start

-moz-animation: voiceplay 1s infinite step-start

-o-animation: voiceplay 1s infinite step-start

animation: voiceplay 1s infinite step-start

}

@-webkit-keyframes voiceplay {

0%,

100% {

background-position: 0px -39px

}

33.333333% {

background-position: 0px -0px

}

66.666666% {

background-position: 0px -19.7px

}

}

基于平台属性不一样,微信的内容都只能正常运行在微信框架内,再深入一点微信是采用WXCSS而网页通用的是CSS。

从安全角度考虑,如果网页端可以准确识别这个内容,就可以通过技术手段来破解用户的聊天内容,甚至得到用户资料!

HTML如何让微信网页自动缩放呀

<meta name=viewport content="width=device-width,user-scalable=yes,minimum-scale=1.0,maximum-scale=1.0"/>

width - viewport的宽度 height - viewport的高度

initial-scale - 初始的缩放比例

minimum-scale - 允许使用者缩放到的最小比例

maximum-scale - 允许使用者缩放到的最大比例

user-scalable - 使用者是否可以手动缩放

HTML如何让微信网页自动缩放

<meta name=viewport content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=yes">

如何让火狐自动缩放,网页中的图片

这个自动缩放不好定义,所谓的自动是自适应萤幕高度还是宽度,会不会遮盖页面其他内容等等,火狐有专门针对图片操作的扩充套件,根据自己的需要,下载安装一个,或者详细说明下具体的要求,方便推荐。

如何让微信微信网页版长时间登陆不自动退出

这个问题,首先,如果你登陆了一直在使用,它是不会退出的。

如果“长时间”不使用而退出,一般是网速和系统的综合结果。

网速好,微信网页版不容易掉线;电脑端的系统,Mac感觉比windows稳定。出去一个小时不动电脑端,回来还是线上的。

但是如果你说的长时间是4、5个小时不使用,仍然线上,那就很难回答了。第一,这么长时间放著不用的人应该不多;第二,这么长时间放著不用,账户也不安全啊。

微信网页如何播放amr档案

你好。

微信语音是以amr格式储存的 大致语音储存位置是:微信安装位置/tencent/micormsg/ 这两个资料夹是你登入过几个微信账所显示的,语音都藏在这里面了 在*voice*的几个资料夹里面就可以找到了 微信amr格式转换: 这个就只能使用软体转换了,推荐一款神器:微信Aud音讯转换Amr

微信网页如何制作

就是网页制作。只是是手机端的网站制作,这个要专门做网站的人做哦。多屏互动是最近才流行的,技术有css3.0,5,还有mobile jquery。

Webview 点选网页上的edit框如何禁止他自动缩放

现在我通过m_WebView.setInitialScale(100)

把网页缩到正好显示,

但一点网页里的输入框网页就放大回480了

WebSettings webSettings = m_WebView.getSettings()

webSettings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS)

webSettings.setJavaScriptEnabled(true)

webSettings.setPluginsEnabled(true)

webSettings.setSupportZoom(false)

webSettings.setBuiltInZoomControls(false)

m_WebView.setInitialScale(100)

m_WebView.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY)

m_WebView.getSettings().setSupportMultipleWindows(true)

------解决方案--------------------------------------------------------

觉得这样控制的方法不太对,就算你m_WebView.setInitialScale(100)当页面过载后还是480的,除非你在每个控制元件事件上都载入m_WebView.setInitialScale(100)

------解决方案--------------------------------------------------------

我也做过类似的东西,我的解决方法是在页面中用DIV+CSS布局好页面,并且不指定绝对的东西,比如宽度就指定100%,它会根据你在手机中的情况而自动缩小或放大,当然这样的页面在电脑上看起来是很丑的,但是放在手机中就很正常了。

另外在手机中指定WebView不允许缩放webSettings.setSupportZoom(false)

希望对你有帮助。

如何锁定maxthon网页缩放

取消"选项>>Maxthon选项>>外挂>>Maxthon外挂"的AutoZoomPage外挂的自动执行

同时检查""选项>>Maxthon选项>>常规>>预设网页缩放比例".

光碟如何自动播放网页

根目录建立autorun.ini档案,及档案

Autorun.ini档案的最简单的编写,就是三行。内容如下:

[autorun] 表示autorun部分开始

icon=* *表示图表档案,通常放在光碟根目录的ico图示,直接写出完整的图示档名即可。若是使用程式图示,则写入程式档名。

open=* *表示自动执行档案。通常把HTML放在根目录,就可直接输入完整档名。若非根目录,要以“.\”表示光碟根目录,并写出完整路径和档名

这样,一个最简单的autorun.ini档案就编写完成了

如何制作微信网页广告

您好!很高兴能为您解答,  

操作步骤:

在百度搜索“易启秀”,开启网页。场景秀可以直接开启网页进行制作,或者下载易启秀的手机客户端进行制作。【在使用手册中找到下图页面下载手机APP。】

进入后注册一个账号,只要有邮箱就可以了。也可以用第三方登陆微信或者QQ。当然如果有账号可以直接登陆。

进入后可以看到有一个已经做好的场景“易启秀使用手册”。开启可以学习下怎么制作场景秀。要是嫌麻烦那么请大家往下看,这里我自己简单的做了一个场景秀和大家分享下过程。

点选“建立场景”,进入后可以选择“自主建立”,也可以采用模板。建立时要写下创作场景的名字和所属类别。制作前先确定自己要制作的模板主题,选择相似的风格缩小范围,然后选择自己中意的模板。

第一页可以选择一页的模板,模板中动画样式都设计好了。选择背景的话只是图片。可以自己上传图片,也可以从图片库中选择图片。

自己选择空白页设计的话可以使用上方的工具栏进行设计。这里注意输入框按钮是用来采集资讯的。比如用来举办活动的场景秀宣传可以可以用输入框来收集参与者的资讯。至于宣传的文字是新增“文字”来写的。

选好新增的元件后,滑鼠单击出现调整动画,位置,样式的编辑选项。双击就会直接进入。用滑鼠拖动可以移动位置。因为没有关闭按钮,想要取消选择的话在空白处点选一下就可以了。