微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用 wavesurfer.js 和 react-native-webview

如何解决使用 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 举报,一经查实,本站将立刻删除。