如何解决使用 wavesurfer.js 和 react-native-webview
我正在尝试在 react-native-webview 组件中使用 wavesurfer.js。如果我在浏览器中按原样打开它,html 可以正常工作,但在 webview 中它不起作用。 WaveSurfer 以未定义的形式回归。我在 webview 中使用了基本的网络音频内容,所以不是这样。
<WebView
originWhitelist={'["*"]'}
ref={ref => (this.webview = ref)}
injectedJavaScriptBeforeContentLoaded={runFirst}
javaScriptEnabled = {true}
domStorageEnabled={true}
scalesPagetoFit={true}
scrollEnabled={false}
originWhitelist={['*']}
allowUniversalAccessFromFileURLs={true}
allowFileAccessFromFileURLs={true}
allowFileAccess={true}
onMessage={this.onMessage}
source={{ html:
`<html>
<body style="background-color: #2a282b" >
<div id="waveform"></div>
</body>
<script src="https://unpkg.com/wavesurfer.js">
</script>
<script>
var wavesurfer = WaveSurfer.create({
container: document.querySelector('#waveform'),barWidth: 1,barHeight: 1,});
wavesurfer.load('http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasDale_64kb.mp3');
</script>
</html>`
}}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。