<!doctype html>
<html>
<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>Audio Play</title>
<meta http-equiv="description" content="塗聚文, Geovin Du,geovindu" />
<meta name="description" content="塗聚文, Geovin Du,geovindu" />
<meta name="keywords" content="HTML5, audio, web, javascript" />
<meta name="author" content="塗聚文, Geovin Du,geovindu" />
</head>
<body>
<button id="btn">
Start
</button>
<div id="wrapper"></div>
<br />
<canvas id="canvas" style="background:#CCCFFF;width:512px;height:255px;"></canvas>
<script type="text/javascript">
document.getElementById("btn").addEventListener("click", function() {
var canvas = document.getElementById('canvas');
var canvasCtx = canvas.getContext("2d");
var audioContext = new (window.AudioContext || window.webkitAudioContext|| window.mozAudioContext || window.msAudioContext)();
var player = document.getElementById('audio_player');
var analyser = audioContext.createAnalyser();
var data = new Uint8Array(analyser.frequencyBinCount);
function render() {
analyser.getByteFrequencyData(data);
canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0, l = data.length; i < l; i++) {
canvasCtx.fillStyle = "#ffff00"; //背景色
canvasCtx.fillRect(i, -(canvas.height/255) * data[i], 1, canvas.height);
}
requestAnimationFrame(render);
}
requestAnimationFrame(render);
var audio = new Audio();
audio.loop = true;
audio.autoplay = false;
audio.crossOrigin = "anonymous";
audio.addEventListener('error', function(e) {
console.log(e);
});
audio.src = "https://greggman.github.io/doodles/sounds/DOCTOR VOX - Level Up.mp3";
//audio.play();
audio.controls = true;
document.getElementById("wrapper").append(audio);
audio.addEventListener('canplay', function() {
var audioSourceNode = audioContext.createMediaElementSource(audio);
audioSourceNode.connect(analyser);
analyser.connect(audioContext.destination);
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="description" content="塗聚文, Geovin Du,geovindu" />
<meta name="description" content="塗聚文, Geovin Du,geovindu" />
<meta name="keywords" content="HTML5, audio, web, javascript" />
<meta name="author" content="塗聚文, Geovin Du,geovindu" />
<title>播放音樂</title>
</head>
<body>
<div id="effect" class="part">
<h3>效果：</h3>
<div class="show">
<div class="demo">
<button id="button">經過我</button>
</div>
</div>
</div>
<script type="text/javascript">
//https://frost.cs.uchicago.edu/ref/JavaScript/developer.mozilla.org/en-US/docs/Web/API/AudioContext.html
//https://caniuse.com/?search=webaudio
/*
IE
Edge*
Firefox
Chrome
Safari
Opera
Safari on iOS
Opera Mini*
Android Browser*
Opera Mobile*
Chrome for Android
Firefox for Android
UC Browser for Android
Samsung Internet
QQ Browser
Baidu Browser
KaiOS Browse
*/
window.AudioContext = window.AudioContext || window.webkitAudioContext|| window.mozAudioContext || window.msAudioContext;
(function () {
if (!window.AudioContext) {
alert('當前瀏覽器不支持Web Audio API');
return;
}
// 按鈕元素
var eleButton = document.getElementById('button');
var AudioContext =window.AudioContext || window.webkitAudioContext|| window.mozAudioContext || window.msAudioContext;// window.AudioContext || window.webkitAudioContext;
// 創建新的音頻上下文接口
var audioCtx = new window.AudioContext(); //window.AudioContext || window.webkitAudioContext|| window.mozAudioContext || window.msAudioContext;
// new AudioContext();
// 發出的聲音頻率數據，表現爲音調的高低
var arrFrequency = [196.00, 220.00, 246.94, 261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88, 523.25, 587.33, 659.25, 698.46, 783.99, 880.00, 987.77, 1046.50];
// 音調依次遞增或者遞減處理需要的參數
var start = 0, direction = 1;
// 時間類型 鼠標移動，或點擊
var eventType = ('ontouchstart' in window || 'ontouchstart' in document)? 'touchstart': 'mouseenter';
// 鼠標hover我們的按鈕的時候
eleButton.addEventListener(eventType, function () {
// 當前頻率
var frequency = arrFrequency[start];
// 如果到頭，改變音調的變化規則（增減切換）
if (!frequency) {
direction = -1 * direction;
start = start + 2 * direction;
frequency = arrFrequency[start];
}
// 改變索引，下一次hover時候使用
start = start + direction;
// 創建一個OscillatorNode, 它表示一個週期性波形（振盪），基本上來說創造了一個音調
var oscillator = audioCtx.createOscillator();
// 創建一個GainNode,它可以控制音頻的總音量
var gainNode = audioCtx.createGain();
// 把音量，音調和終節點進行關聯
oscillator.connect(gainNode);
// audioCtx.destination返回AudioDestinationNode對象，表示當前audio context中所有節點的最終節點，一般表示音頻渲染設備
gainNode.connect(audioCtx.destination);
// 指定音調的類型，其他還有square|triangle|sawtooth
oscillator.type = 'sine';
// 設置當前播放聲音的頻率，也就是最終播放聲音的調調
oscillator.frequency.value = frequency;
// GainNode 接口表示音量變更。它是一個 AudioNode 音頻處理模塊，在輸出前使用給定 增益 應用到輸入。一個 GainNode 總是隻有一個輸入和一個輸出，都通過同樣數量的聲道
// gainNode.gain返回一個AudioParam
// AudioParam 接口代表音頻相關的參數， 通常是一個 AudioNode (例如 GainNode.gain) 的參數。一個 AudioParam 可以被設置爲一個具體的值或者數值的改變 ，可以被安排在在一個具體的時刻並且遵循一個特定的模式發生。
// AudioParam.setValueAtTime() 在一個確切的時間，即時更改 AudioParam 的值，按照AudioContext.currentTime 的時間。新的值會被傳遞到 value 參數。
// currentTime是AudioContext的一個read-only屬性，返回double秒（從0開始）表示一個只增不減的硬件時間戳，可以用來控制音頻回放，實現可視化時間軸等等。
// 靜止狀態下返回的是0
// AudioParam.setValueAtTime(value, startTime)
gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
// linearRampToValueAtTime方法作用是調整 AudioParam 的值，使其逐漸按線性變化。這個改變會從上一個事件指定的事件開始，跟隨一個線性“斜坡”到參數給的新值，並在 endTime 參數給定的時間到達新值。
// AudioParam.exponentialRampToValueAtTime(value, endTime)
gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);
// 音調從當前時間開始播放
oscillator.start(audioCtx.currentTime);
// 調整 AudioParam 的值，使其逐漸按指數變化。這個改變會從上一個事件指定的事件開始，跟隨一個指數“斜坡”到參數給的新值，並在 endTime 參數給定的時間到達新值。
// 語法：AudioParam.exponentialRampToValueAtTime(value, endTime)
// 1秒內聲音慢慢降低，是個不錯的停止聲音的方法
gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1);
// 1秒後完全停止聲音
oscillator.stop(audioCtx.currentTime + 1);
});
})();
</script>
</body>
</html>
