audio - 缓冲区和Web音频API-6ren

audio - 缓冲区和Web音频API

转载作者：行者123 更新时间：2023-12-02 22:27:23

我目前正在为大学项目构建环境声音生成器，但遇到了一个小问题。

基本上，我目前有3个不同的文件，用户可以组合暂停/播放，每个暂停/播放都可以。唯一的问题是，如果我一次播放多个声音，则在我按下stop之后，我的2种声音之一仍会继续播放。

也许有人可以向我指出我出了问题的地方和/或可以向我学习更多有关API的资源。

<head> 
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/loopy_styles.css" />
    <!--<script type="text/javascript" src="js/loop_functions.js"></script>-->
    <script>
        context = new (window.AudioContext || window.webkitAudioContext)();

        var soundBuffer1 = null;
        var soundBuffer2 = null;
        var soundBuffer3 = null;
        var soundBuffer4 = null;
        var soundBuffer5 = null;

        window.onload = function() {
          create_buffers();
        };

        function create_buffers(){
          soundBufferSourceNode1 = context.createBufferSource();
          soundBufferSourceNode1.looping = true;
          soundBufferSourceNode2 = context.createBufferSource();
          soundBufferSourceNode2.looping = true;
          soundBufferSourceNode3 = context.createBufferSource();
          soundBufferSourceNode3.looping = true;
          soundBufferSourceNode4 = context.createBufferSource();
          soundBufferSourceNode4.looping = true;
          soundBufferSourceNode5 = context.createBufferSource();
          soundBufferSourceNode5.looping = true;
        };

        loadSound('sounds/fire_test1.wav', 1);
        loadSound('sounds/wind_test.wav', 2);
        loadSound('sounds/rain_test1.wav', 3);
        loadSound('sounds/stream.mp3', 4);
        loadSound('sounds/spring_test.wav', 5);


        function play_sound1(){
          document.getElementById('playBtn1_play').style.display = 'none';
          document.getElementById('playBtn1_stop').style.display = 'block';

          playSound(soundBuffer1, soundBufferSourceNode1);
        }
        function stop_sound1(){
          document.getElementById('playBtn1_play').style.display = 'block';
          document.getElementById('playBtn1_stop').style.display = 'none';

          stopSound(soundBufferSourceNode1);
          create_buffers();
        }
        function play_sound2(){
          document.getElementById('playBtn2_play').style.display = 'none';
          document.getElementById('playBtn2_stop').style.display = 'block';
          playSound(soundBuffer2, soundBufferSourceNode2);
          p2=true;
        };
        function stop_sound2(){
          document.getElementById('playBtn2_play').style.display = 'block';
          document.getElementById('playBtn2_stop').style.display = 'none';
          p2=false;
          stopSound(soundBufferSourceNode2);
          create_buffers();
        };
        function play_sound3(){
          document.getElementById('playBtn3_play').style.display = 'none';
          document.getElementById('playBtn3_stop').style.display = 'block';
          p3=true;
          playSound(soundBuffer3, soundBufferSourceNode3);
        }
        function stop_sound3(){
          document.getElementById('playBtn3_play').style.display = 'block';
          document.getElementById('playBtn3_stop').style.display = 'none';
          p3=false;
          stopSound(soundBufferSourceNode3);
          create_buffers();
        }

        function playSound(buffer, bufferSourceNode) {
          bufferSourceNode.buffer = buffer;
          bufferSourceNode.connect(context.destination);
          bufferSourceNode.noteOn(0);
        };
        function stopSound(bufferSourceNode) {
          bufferSourceNode.noteOff(0);
        };
        function loadSound(url, bufferNum) {
          var request = new XMLHttpRequest();
          request.open('GET', url, true);
          request.responseType = 'arraybuffer';

          request.onload = function() {
            var successCallback = function(buffer) {
              switch(bufferNum) {
                case 1:
                  soundBuffer1 = buffer;
                break;
                case 2:
                      soundBuffer2 = buffer;
                break;
                case 3:
                  soundBuffer3 = buffer;
                break;
                case 4:
                  soundBuffer4 = buffer;
                break;
                case 5:
                  soundBuffer5 = buffer;
                break;
              }
            }
            var errorCallback = function(e) {
              console.log(e);
            }
            context.decodeAudioData(request.response, successCallback, errorCallback);
          }
          request.send();
        }
    </script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <title>Ambient Sound Generator</title>  
  </head>
<body>
<div class="background">
  <div id="intro-text">
    <h1 id="site-title">Ambient Sound Generator</h1>
    <p>Mix ambient sounds together to block out distractions and help you focus or relax</p>
    <p>Click the buttons below to begin</p>
  </div>
  <div id="button-container">
    <div id="btn1">
      <input type="image" class="pp_img" src="img/fire-pause.png" name="Fire" id="playBtn1_play" onclick="play_sound1();"   />
      <input type="image" class="pp_img" src="img/fire-play.png" name="Fire" id="playBtn1_stop" onclick="stop_sound1();" style="display:none"   />
      <p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p>
    </div>
    <div id="btn2">
      <input type="image" class="pp_img" src="img/wind-pause.png" name="Wind" id="playBtn2_play" onclick="play_sound2();"  />
      <input type="image" class="pp_img" src="img/wind-play.png" name="Wind" id="playBtn2_stop" onclick="stop_sound2();" style="display:none" />
      <p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p>
    </div>
    <div id="btn3">
      <input type="image" class="pp_img" src="img/rain-pause.png" name="Rain" id="playBtn3_play" onclick="play_sound3();"/>
      <input type="image" class="pp_img" src="img/rain-play.png" name="Rain" id="playBtn3_stop" onclick="stop_sound3();" style="display:none"/>
      <p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p>
    </div>
    <div id="btn4">
      <input type="image" class="pp_img" src="img/stream-pause.png" name="Stream" id="playBtn4_play" onclick="play_sound4();"/>
      <input type="image" class="pp_img" src="img/stream-play.png" name="Stream" id="playBtn4_stop" onclick="stop_sound4();" style="display:none"/>
      <p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p>
    </div>
    <div id="btn5">
      <input type="image" class="pp_img" src="img/forest-pause.png" name="Rain" id="playBtn5_play" onclick="play_sound5();"/>
      <input type="image" class="pp_img" src="img/forest-play.png" name="Rain" id="playBtn5_stop" onclick="stop_sound5();" style="display:none" />
      <p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p>
    </div>
  </div>
</div>
</body>
    <script>
      function refreshData(){
        x = 1;  // x = seconds
        var d = new Date()
        var h = d.getHours();
        var m = d.getMinutes();
        var s = d.getSeconds();

        if (h<=9) {h = '0'+h};
        if (m<=9) {m = '0'+m};
        if (s<=9) {s = '0'+s};

        var color = '#'+h+m+s;

          $("div.background").css("background-color", color );
          $("p#hex").text(color);
          setTimeout(refreshData, x*1000);
      }
      refreshData(); // execute function
    </script>

最佳答案

您需要将所有当前正在播放的声音缓存在playSound中，并在开始新声音之前将其停止。

您不应在事实之前创建所有这些buffersourcenodes；要开始播放时，只需创建一个即可。

另外，您应该使用start()和stop()，而不要使用noteOn()和noteOff()-不建议使用后者。

试试这个:

<head> 
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/loopy_styles.css" />
    <!--<script type="text/javascript" src="js/loop_functions.js"></script>-->
    <script>
        context = new (window.AudioContext || window.webkitAudioContext)();

        var soundBuffers = [null,null,null,null,null,null];  // extra entry in array as dummy '0' entry

        window.onload = function() {
          loadSound('sounds/fire_test1.wav', 1);
          loadSound('sounds/wind_test.wav', 2);
          loadSound('sounds/rain_test1.wav', 3);
          loadSound('sounds/stream.mp3', 4);
          loadSound('sounds/spring_test.wav', 5);
        };

        var currentlyPlayingSoundNum = 0;
        var currentlyPlayingSound = null;

        function play_sound(num){
          stop_any_currently_playing_sound();

          if (num) {
            document.getElementById('playBtn'+num+'_play').style.display = 'none';
            document.getElementById('playBtn'+num+'_stop').style.display = 'block';

            currentlyPlayingSoundNum = num;
            currentlyPlayingSound = context.createBufferSource();
            currentlyPlayingSound.looping = true;
            currentlyPlayingSound.buffer = soundBuffers[num];
            currentlyPlayingSound.connect(context.destination);
            currentlyPlayingSound.start(0);
          }
        }

        function stop_sound(){
          if (currentlyPlayingSound) {
            document.getElementById('playBtn'+currentlyPlayingSoundNum+'_play').style.display = 'block';
            document.getElementById('playBtn'+currentlyPlayingSoundNum+'_stop').style.display = 'none';

            currentlyPlayingSound.stop(0);
            currentlyPlayingSound = null;
            currentlyPlayingSoundNumber = 0;
          }
        }


        function loadSound(url, bufferNum) {
          var request = new XMLHttpRequest();
          request.open('GET', url, true);
          request.responseType = 'arraybuffer';

          request.onload = function() {
            var successCallback = function(buffer) {
              soundBuffers[bufferNum] = buffer;
            }
            var errorCallback = function(e) {
              console.log(e);
            }
            context.decodeAudioData(request.response, successCallback, errorCallback);
          }
          request.send();
        }
    </script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <title>Ambient Sound Generator</title>  
  </head>
<body>
<div class="background">
  <div id="intro-text">
    <h1 id="site-title">Ambient Sound Generator</h1>
    <p>Mix ambient sounds together to block out distractions and help you focus or relax</p>
    <p>Click the buttons below to begin</p>
  </div>
  <div id="button-container">
    <div id="btn1">
      <input type="image" class="pp_img" src="img/fire-pause.png" name="Fire" id="playBtn1_play" onclick="play_sound(1);"   />
      <input type="image" class="pp_img" src="img/fire-play.png" name="Fire" id="playBtn1_stop" onclick="stop_sound();" style="display:none"   />
      <p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p>
    </div>
    <div id="btn2">
      <input type="image" class="pp_img" src="img/wind-pause.png" name="Wind" id="playBtn2_play" onclick="play_sound(2);"  />
      <input type="image" class="pp_img" src="img/wind-play.png" name="Wind" id="playBtn2_stop" onclick="stop_sound();" style="display:none" />
      <p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p>
    </div>
    <div id="btn3">
      <input type="image" class="pp_img" src="img/rain-pause.png" name="Rain" id="playBtn3_play" onclick="play_sound(3);"/>
      <input type="image" class="pp_img" src="img/rain-play.png" name="Rain" id="playBtn3_stop" onclick="stop_sound();" style="display:none"/>
      <p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p>
    </div>
    <div id="btn4">
      <input type="image" class="pp_img" src="img/stream-pause.png" name="Stream" id="playBtn4_play" onclick="play_sound(4);"/>
      <input type="image" class="pp_img" src="img/stream-play.png" name="Stream" id="playBtn4_stop" onclick="stop_sound();" style="display:none"/>
      <p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p>
    </div>
    <div id="btn5">
      <input type="image" class="pp_img" src="img/forest-pause.png" name="Rain" id="playBtn5_play" onclick="play_sound(5);"/>
      <input type="image" class="pp_img" src="img/forest-play.png" name="Rain" id="playBtn5_stop" onclick="stop_sound();" style="display:none" />
      <p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p>
    </div>
  </div>
</div>
</body>
    <script>
      function refreshData(){
        x = 1;  // x = seconds
        var d = new Date()
        var h = d.getHours();
        var m = d.getMinutes();
        var s = d.getSeconds();

        if (h<=9) {h = '0'+h};
        if (m<=9) {m = '0'+m};
        if (s<=9) {s = '0'+s};

        var color = '#'+h+m+s;

          $("div.background").css("background-color", color );
          $("p#hex").text(color);
          setTimeout(refreshData, x*1000);
      }
      refreshData(); // execute function
    </script>

关于audio - 缓冲区和Web音频API，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27238105/

文章推荐： elasticsearch - Google Cloud Platform-连接到 Elasticsearch

文章推荐： elasticsearch - 为什么区分大小写在elasticSearch中不起作用

文章推荐： elasticsearch - ElasticSearch不过滤

javascript - Web 音频/ radio 流客户端 : use Howler. js、 native 音频、其他库？
我一直在为实时流和静态文件(HTTP 上的 MP3)构建网络广播播放器。我选了Howler.js作为规范化 quirks 的后端的 HTML5 Audio (思考:自动播放、淡入/淡出、进度事件)。
vue实现移动端input上传视频、音频
vue移动端input上传视频、音频，供大家参考，具体内容如下 html部分 ?
PHP转换图像+音频=视频
关闭。这个问题需要更多 focused .它目前不接受答案。想改进这个问题？更新问题，使其仅关注一个问题 editing this post . 7年前关闭。 Improve this questi
iphone - 音频/视频编程
我想在我的程序中访问音频和视频。 MAC里面可以吗？我们的程序在 Windows 上运行，我使用 directshow 进行音频/视频编程。但我想在 MAC 中开发相同的东西。有没有像direct
iOS 音频/声音不会在后台模式处于事件状态时在后台播放
我的应用程序(使用 Flutter 制作，但这应该无关紧要)具有类似于计时器的功能，可以定期(10 秒到 3 分钟)发出滴答声。我在我的 Info.plist 中激活了背景模式 Audio、AirPl
javascript - 音频 JavaScript
我是 ionic 2 的初学者我使用了音频文件。 import { Component } from '@angular/core'; import {NavController, Alert
java - 插入声音/音频
我有一个包含ListView和图片的数据库，我想在每个语音数据中包含它们。我已经尝试过，但是有很多错误。以下是我的java和xml。数据库.java package com.example.data
php - 音频/音乐社交网站托管服务
我在zend framework 2上建立了一个音乐社交网络。您可以想象它与SoundCloud相同，用户上传歌曲，其他用户播放它们，这些是网站上的基本操作。我知道将要托管该页面的服务器将需要大量带
android - 音频-Android
我正在尝试在android应用中播放音频，但是在代码中AssetFileDescriptor asset1及其下一行存在错误。这是代码: MediaPlayer mp; @Override prote
wordpress - [音频] WordPress短代码中的网址错误
我对 WordPress Audio Shortcode有问题。我这样使用它: 但是在前面，在HTML代码中我得到了: document.createElement('audio');
matlab - 音频.wav文件的SNR和评估过滤技术的客观措施
我正在做一项关于降低噪音的滤波技术的实验。我在数据集中的样本是音频文件(.wav)，因此，我有:原始录制的音频文件，我将它们与噪声混合，因此变得混合(噪声信号)，我将这些噪声信号通过滤波算法传递，输出
audio - 音频/声音增强的神经网络
一个人会使用哪种类型的神经网络架构将声音映射到其他声音？神经网络擅长学习从序列到其他序列，因此声音增强/生成似乎是它们的一种非常流行的应用(但不幸的是，事实并非如此-我只能找到一个(相当古老的)洋红色
windows - 音频:如何设置默认麦克风的电平？
这个让我抓狂: 在专用于此声音播放/录制应用程序的 Vista+ 计算机上，我需要我的应用程序确保(默认)麦克风电平被推到最大。我该怎么做？我找到了 Core Audio lib ，找到了如何将 I
html - Chrome扩展程序和流式传输<音频>
{ "manifest_version": 2, "name": "Kitten Radio Extension", "description": "Listen while browsi
c# - 音频，FFT不起作用
class Main { WaveFileReader reader; short[] sample; Complex[] tmpComplexArray; publi
android - 音频，平衡2种来源的声音
我正在使用电话录音软件(android)，该软件可以记录2个人在电话中的通话。每个电话的输出是一个音频文件，其中包含来自 call 者和被 call 者的声音。但是，大多数情况下，运行此软件的电话发
javascript - 音频/语音比较和getUserMedia
我正在构建一个需要语音激活命令的Web应用程序。我正在使用getUserMedia作为音频输入。对于语音激活命令，该过程是用户将需要通过记录其语音来“校准”命令。例如，对于“停止”命令，用户将说出“
cordova - 在PouchDB中存储视频/音频
我正在开发一个Cordova应用程序，并将PouchDB用作数据库，当连接可用时，它将所有信息复制到CouchDB。我成功存储了简单的文本和图像。我一直在尝试存储视频和音频，但是没有运气。我存储
audio - 音频.MP3在Safari浏览器中不起作用
我正在开发web application，我必须在其中使用.MP3的地方使用播放声音，但是会发生问题。声音为play good in chrome, Firefox，但为safari its not
audio - 音频:软件中的位深度减少
如何减少音频文件的位深？是否忽略了MSB或LSB？两者混合吗？ (旁问:这叫什么？) 最佳答案 TL / DR:将音频曲线高度变量右移至较低位深度可以将音频视为幅度(Y轴)随时间(X轴)的模拟曲线。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

audio - 缓冲区和Web音频API