前端H5语音插件demo,语音二进制流转成audio可播放格式

源码地址:https://github.com/xiangyuecn/Recorder

demo地址:https://xiangyuecn.github.io/Recorder/

服务器返回二进制转成audio可播放路径

     

       var sblod = new Blob([bufs]);//bufs为二进制

       var audio=document.getElementById("audioView");// 设置路径使用jQuery或者直接生成dom都不生效       

        if (window.URL) {
                audio.src = window.URL.createObjectURL(sblod);
         } else {
                audio.src = sblod;
          }
          audio.autoplay = true;//自动播放

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端H5页面的适配是指将不同尺寸的设备,如手机、平板等,显示出同样的页面效果。以下是一个适配demo: 1. 使用Viewport设置页面缩放比例。 ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> ``` 2. 使用CSS媒体查询调整样式。 ```css /* 当屏幕宽度小于等于375px时,应用以下样式 */ @media screen and (max-width: 375px) { body { font-size: 14px; } .nav { display: none; } .menu-toggle { display: block; } } /* 当屏幕宽度大于375px且小于等于768px时,应用以下样式 */ @media screen and (min-width: 376px) and (max-width: 768px) { body { font-size: 16px; } .nav { display: block; } .menu-toggle { display: none; } } ``` 3. 使用REM单位相对于根元素调整布局。 ```css html { font-size: 16px; } /* 将所有尺寸单位改为REM */ h1 { font-size: 2rem; /* 相当于32px */ margin-bottom: 1rem; /* 相当于16px */ } p { font-size: 1rem; /* 相当于16px */ line-height: 1.5rem; /* 相当于24px */ } ``` 4. 使用钩子函数根据设备类型设置字体大小。 ```js if (/Android (\d+\.\d+)/.test(navigator.userAgent)) { var version = parseFloat(RegExp.$1); if (version > 2.3) { var width = window.innerWidth; var fontSize = Math.min(16, width / 360 * 20) + 'px'; document.getElementsByTagName('html')[0].style.fontSize = fontSize; } } else { // 非Android设备,根据屏幕宽度设置字体大小 var width = window.innerWidth; var fontSize = Math.min(16, width / 360 * 20) + 'px'; document.getElementsByTagName('html')[0].style.fontSize = fontSize; } ``` 通过以上方法,可以做到良好的适配效果,使得H5页面可以自适应不同尺寸的终端设备,获得更好的用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值