网页纯JS通过AudioContext播放声音

2024无限可能！

于 2022-11-29 17:16:47 发布

阅读量1.2k

点赞数

分类专栏：实用代码工具片段

本文链接：https://blog.youkuaiyun.com/hbmern/article/details/128101779

版权

JavaScript 音频处理前端开发事件处理 HTML

关键词由优快云通过智能技术生成

实用代码工具片段专栏收录该内容

2 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="play">播放声音</button>
    <script type="text/javascript">
      var AudioContext = AudioContext || webkitAudioContext,
        context = new AudioContext(),
        canClick = true,
        timeOut
      function makeNoise() {
        console.log('函数执行了!')
        if (canClick) {
          canClick = false
          var oscillator = context.createOscillator()
          oscillator.connect(context.destination)
          oscillator.frequency.value = 500
          oscillator.start(0)
          setTimeout(function() {
            oscillator.disconnect()
            clearTimeout(timeOut)
            canClick = true
          }, 1500)
        }
      }
      var player = document.getElementById('play')
      player.onclick = function() {
        makeNoise()
      }
    </script>
  </body>
</html>