jsfx生成可设置参数的音效示例代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：jsfx生成音效示例代码，可设置参数

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-eqv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jsfx</title>
    <script>
        window.onerror = function(msg, url, linenumber) {
        			alert('Error message: '+msg+'\nURL: '+url+'\nLine Number: '+linenumber);
        			return true;
        		}
    </script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jsfx.js"></script>
</head>

<body>
    <div id="jsfx">
        <h1 class="title">jsfx</h1>
        <div class="description">See <a href="https://github.com/loov/jsfx">github.com/loov/jsfx</a> for more information.</div>
        <div></div>
        <div id="control" class="panel">
            <div class="panel-title">Control</div>
            <input type="checkbox" id="use-audiocontext" title="Use AudioContext." onclick="ChangePlayMode()">
            <button onclick="PlayCurrent()">Play</button>
            <button onclick="AddToLibrary()">Add</button>
            <a class="button" id="download" href="#" onmousedown="UpdateDownloadLink()" download="sound.wav">Download</a>
            <div id="last-time" title="Time it took to generate."></div>
            <div class="clear"></div>
        </div>
        <div id="presets" class="panel">
            <div class="panel-title">Presets</div>
        </div>
        <div class="clear"></div>
        <div id="panels">
        </div>
        <div class="clear"></div>

        <div class="panel wide">
            <div class="panel-title">Library</div>
            <input type="text" readonly id="library-content" title="Paramset for the current Library.">
            <div id="library"></div>
        </div>
    </div>
    <script>
        "use strict";
        var Library = {};
        var CurrentParams = {};
        
        function PlayCurrent(){ Play(CurrentParams); }
        
        var PlayAudio = function(params){
        	var start = (new Date())|0;
        	jsfx.Sound(params).play();
        	var stop = (new Date())|0;
        	var time = (stop - start) + "ms"
        	console.log("Generated in", time);
        	document.getElementById("last-time").innerText = time;
        };
        var Play = PlayAudio;
        
        var PlayContext;
        if(typeof AudioContext !== "undefined"){
        	var Live = jsfx.Live();
        	PlayContext = function(params){
        		Live._play(params);
        	};
        } else {
        	document.getElementById("use-audiocontext").hidden = true;
        }
        
        function ChangePlayMode(){
        	if(document.getElementById("use-audiocontext").checked){
        		Play = PlayContext;
        	} else {
        		Play = PlayAudio;
        	}
        }
        
        function AddToLibrary(){
        	var name = prompt("Please enter name for the sound:");
        	if((name == null) || (name == "")){
        		return;
        	}
        
        	var params = JSON.parse(JSON.stringify(CurrentParams));
        	jsfx._RemoveEmptyParams(params);
        
        	Library[name] = params;
        	UpdateHash();
        	UpdateCurrentView();
        }
        
        function SelectPreset(preset){
        	CurrentParams = preset();
        	UpdateCurrentView();
        	PlayCurrent();
        }
        
        var LastHash = "";
        function UpdateHash(){
        	var json = JSON.stringify(Library);
        	document.getElementById("library-content").value = json;
        	LastHash = "#" + btoa(json);
        	window.location.hash = LastHash;
        }
        
        function LoadFromHash(){
        	var json = window.location.hash.substr(1);
        	try{
        		json = atob(json)
        		document.getElementById("library-content").value = json;
        		Library = JSON.parse(json);
        	}catch(e){ console.log(e); }
        }
        
        if(window.location.hash != ""){ LoadFromHash(); }
        window.onhashchange = function(ev){×

        	if(window.location.hash != LastHash){
        		LoadFromHash();
        		UpdateCurrentView();
        	}
        };
        
        function UpdateDownloadLink(){
        	var sound = jsfx.Sound(CurrentParams);
        	var el = document.getElementById("download");
        	el.href = sound.src;
        }
        
        function UpdateCurrentView(){
        	// create a copy of params
        	var params = JSON.parse(JSON.stringify(CurrentParams));
        	jsfx.InitDefaultParams(params, jsfx.DefaultModules);
        
        	list(params, function(moduleName, params){
        		list(params, function(paramName, paramValue){
        			var element = document.getElementById(moduleName + "$" + paramName);;
        			if(element){
        				element.value = paramValue;
        			}
        			var element = document.getElementById(moduleName + "_" + paramName + "_" + paramValue);
        			if(element){
        				element.checked = true;
        			}
        		});
        	});
        
        	var library = document.getElementById("library");
        	library.innerHTML = "";
        	var els = list(Library, function(name, params){
        		var load  = E("button", "item-load", "#");
        		load.title = "Load";
        		load.onclick = function(){
        			CurrentParams = JSON.parse(JSON.stringify(params));
        			UpdateCurrentView();
        		};
        
        		var del  = E("button", "item-delete", "X");
        		del.title = "Delete";
        		del.onclick = function(){
        			delete Library[name];
        			UpdateHash();
        			UpdateCurrentView();
        		}
        
        		var el = E("div", "library-item", [
        			load,
        			E("span", "item-name", name),
        			del
        		]);
        		el.title = "play";
        		el.onclick = function(){
        			Play(params);
        		};
        		library.appendChild(el);
        	});
        }
        
        document.getElementById("library-content").click = function(ev){
        	ev.currentTarget.select();
        }
        
        function ModifyValue(moduleName, paramName, newValue){
        	// console.log("CHANGE", moduleName, paramName, newValue);
        	if(CurrentParams[moduleName] == null){
        		CurrentParams[moduleName] = {};
        	}
        	C.........完整代码请登录后点击上方下载按钮下载查看