最近做柜子的项目,需求要求用户用微信扫一扫扫柜子二维码,H5页面跳转到首页打开柜门的同时播放柜门已打开的语音。
方案一:文字转语音 Web Speech API
Web Speech API 能够将语音数据合并到 Web 应用程序中。Web Speech API 有两个部分:SpeechSynthesis 语音合成(文本到语音 TTS)和 SpeechRecognition 语音识别(异步语音识别)。
但是,此方法在安卓微信上不可用!
方案二:howler.js
howler.js是一个适用于现代网络的音频库。它默认使用Web Audio API,并可回退到HTML5 Audio。这使得使用 JavaScript 处理音频在所有平台上都变得简单而可靠。
<script>
import { Howl } from 'howler'
export default {
mounted () {
const soundBgm = new Howl({
src: ['音频'], // 提供多个格式
autoplay: true,
loop: false,
volume: 1,
preload: true,
mute: true,
onplay: function () {
console.log('播放')
},
onpause: function () {
console.log('暂停')
},
onstop: function () {
console.log('停止')
}
})
soundBgm.play()
}
}
</script>
方案三:audio标签
<audio ref="audio" id="bookAudio" autoplay>
<source :src="music" type="audio/mpeg" />
</audio>
由于IOS、Android和微信自带的浏览器不允许自动播放audio和video,记录下我如何解决。
1、触摸监听
原理是当用户触碰到屏幕就开始播放音频,以达到看起来好像是自动播放的假象。如果用户不触碰,则不会播放。
document.addEventListener('touchstart', function() {
document.getElementById('bookAudio').play()
// 或者
soundBgm.play()
})
2、微信浏览器:WeixinJSBridgeReady
微信的内置浏览器内置了 WeixinJSBridgeReady 事件,可以兼容大部分的移动设备。
document.addEventListener('WeixinJSBridgeReady', () => {
document.getElementById('bookAudio').play()
// 或者
soundBgm.play()
}, false)