本篇文章给大家谈谈AudioContext未在JavaScript中正确设置增益，以及audioread函数未定义的知识点，同时本文还将给你拓展AndroidWebview和Javascript交互，

本篇文章给大家谈谈AudioContext 未在 JavaScript 中正确设置增益，以及audioread函数未定义的知识点，同时本文还将给你拓展Android Webview 和 Javascript 交互，实现 Android 和 JavaScript 相互调用、AudioContext CreateOscillator - 音调只开始一次、AudioContext 不允许启动错误、AudioContext 方法播放音频等相关知识，希望对各位有所帮助，不要忘了收藏本站喔。

• AudioContext 未在 JavaScript 中正确设置增益（audioread函数未定义）
• Android Webview 和 Javascript 交互，实现 Android 和 JavaScript 相互调用
• AudioContext CreateOscillator - 音调只开始一次
• AudioContext 不允许启动错误
• AudioContext 方法播放音频

AudioContext 未在 JavaScript 中正确设置增益（audioread函数未定义）

如何解决AudioContext 未在 JavaScript 中正确设置增益

我正在尝试按照本文将音频元素的音量设置为 1 以上。

https://cwestblog.com/2017/08/17/html5-getting-more-volume-from-the-web-audio-api/

我需要能够多次设置它，所以我设置了一个全局数组来存储不同的结果，以便我可以根据参与者进行调整。

这似乎不起作用，对我来说，设置增益时我看不出任何区别，我做错了什么吗？

window.audioGainParticipants = [];
function amplifyMedia(participant_id,mediaElem,multiplier) {
  const exists = window.audioGainParticipants.find(
    (x) => x.participant_id === participant_id
  );
  let result = null;
  if (exists) {
    result = exists.result;
  } else {
    var context = new (window.AudioContext || window.webkitaudiocontext)();
    result = {
      context: context,source: context.createMediaElementSource(mediaElem),gain: context.createGain(),media: mediaElem,amplify: function (multiplier) {
        result.gain.gain.value = multiplier;
      },getAmpLevel: function () {
        return result.gain.gain.value;
      },};
    result.source.connect(result.gain);
    result.gain.connect(context.destination);
    window.audioGainParticipants.push({ participant_id,result });
  }
  result.amplify(multiplier);
}

我这样称呼它...

const audioElement = document.getElementById(
  `audio-${participantId}`
);
amplifyMedia(
  `audio-${participantId}`,audioElement,volume // number between 0-2
);

解决方法

Android Webview 和 Javascript 交互，实现 Android 和 JavaScript 相互调用

在 Android 的开发过程中、遇到一个新需求、那就是让 Java 代码和 Javascript 代码进行交互、在 IOS 中实现起来很麻烦、而在 Android 中相对来说容易多了、Android 对这种交互进行了很好的封装、我们可以很简单的用 Java 代码调用 WebView 中的 js 函数、也可以用 WebView 中的 js 来调用 Android 应用中的 Java 代码。

案例主要包含了：

1.  Html 中调用 Android 方法
2. Android 调用 JS 方法无参数
3. Android 调用 JS 方法有参数
4. Android 调用 JS 方法有参数且有返回值处理方式 1
5. Android 调用 JS 方法有参数且有返回值处理方式 2（Android4.4 以上）

1：创建 JS 对象

webView.addJavascriptInterface(new JsInterface(), "obj");

public class JsInterface {
	//JS中调用Android中的方法 和返回值处理的一种方法
		
	/****
          * Html中的点击事件 onclick
	  *  <input type="button" value="结算" onclick="showToast(''12'')">
	  * @param toast
	  */
	@JavascriptInterface
	public void showToast(String toast) {
	  Toast.makeText(MainActivity.this, "你的商品价格是：￥"+toast, Toast.LENGTH_SHORT).show();
	}
}

 function showToast(toast) { 
	var money=toast*3;
	javascript:obj.showToast(money);
}

2：

webView.loadUrl("javascript:funFromjs()");

function funFromjs(){
    document.getElementById("helloweb").innerHTML="div显示数据,无参数";
}

3：

webView.loadUrl("javascript:funJs(''Android端传入的信息，div标签中显示,含参数'')");

function funJs(msg){
   document.getElementById("hello2").innerHTML=msg;
}

4： 

webView.loadUrl("javascript:sum(6,6)");

/***
 * Android代码调用获取J是中的返回值
 * 
 * @param result
*/
   @JavascriptInterface
   public void onSum(int result) { 
	Toast.makeText(MainActivity.this, "Android调用JS方法且有返回值+计算结果=="+result, Toast.LENGTH_SHORT).show();
   } 

function sum(i,m){ 
    var result = i*m; 
    document.getElementById("h").innerHTML= "Android调用JS方法且有返回值--计算结果="+result; 
    javascript:obj.onSum(result) 
} 

5：

 webView.evaluateJavascript("sumn(6,11)", new ValueCallback<String>() {
         @Override
	 public void onReceiveValue(String value) {
	     Toast.makeText(MainActivity.this, "返回值"+value, Toast.LENGTH_SHORT).show();
           }
});

function sumn(i,m){ 
     var result = i*m; 
     document.getElementById("hh").innerHTML= "Android调用JS方法且有返回值--计算结果="+result; 
     return result;
} 

   注意：

1、Java 调用 js 里面的函数、效率并不是很高、估计要 200ms 左右吧、做交互性很强的事情、这种速度很难让人接受、而 js 去调 Java 的方法、速度很快、50ms 左右、所以尽量用 js 调用 Java 方法

2、Java 调用 js 的函数、没有返回值、调用了就控制不到了

3、Js 调用 Java 的方法、返回值如果是字符串、你会发现这个字符串是 native 的、转成 locale 的才能正常使用、使用 toLocaleString () 函数就可以了、不过这个函数的速度并不快、转化的字符串如果很多、将会很耗费时间

4、网页中尽量不要使用 jQuery、执行起来需要 5-6 秒、最好使用原生的 js 写业务脚本、以提升加载速度、改善用户体验。

注：使用的是本地的 Html 文件，不过在网络链接的 Html 文件也是可以实现的。   

源码点击下载

AudioContext CreateOscillator - 音调只开始一次

如何解决AudioContext CreateOscillator - 音调只开始一次

我使用 JQuery Mobile 只是打开或关闭提示音，但我只能打开一次，下次按钮停止响应时。

此外，声音仅在关闭警报弹出窗口后才开始（小问题）。

为什么会这样/如何改变？

代码：

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>

    <Meta name="viewport" content="width=device-width,initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    <script>
        
        var context = new AudioContext()
        var o = context.createOscillator()
        o.type = "sine"
        o.connect(context.destination)
        
        $(document).on(''click'',''#btnPlay'',function(){
            o.start();
            alert("started");
        });

        $(document).on(''click'',''#btnStop'',function(){
            o.stop();
            alert("stopped");
        });
        
    </script>
    
</head>
<body>

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div role="main">
        <p>Page content goes here.</p>
        <button id = "btnPlay">Play</button>
        <button id = "btnStop">Stop</button>
        
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

AudioContext 不允许启动错误

   It looks like you''re using the development build of the Firebase JS SDK.
    When deploying Firebase apps to production,it is advisable to only import
    the individual SDK components you intend to use.
    
    For the module builds,these are available in the following manner
    (replace <PACKAGE> with the name of a component - i.e. auth,database,etc):
    
    Commonjs Modules:
    const firebase = require(''firebase/app'');
    require(''firebase/<PACKAGE>'');
    
    ES Modules:
    import firebase from ''firebase/app'';
    import ''firebase/<PACKAGE>'';
    
    Typescript:
    import * as firebase from ''firebase/app'';
    import ''firebase/<PACKAGE>'';

_____________
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. 

_______________
Animated: `useNativeDriver` is not supported because the native animated module is missing. Falling back to JS-based animation. To resolve this,add `RCTAnimation` module to this app,or remove `useNativeDriver`. More info: https://github.com/facebook/react-native/issues/11094#issuecomment-263240420

const [AudioContext] = [window.AudioContext];
const audioCtx = AudioContext ? new AudioContext() : '''';`