Html 简明教程
HTML - Audio Player
HTML Local Audio Player with visualizer
HTML 功能包括原生音訊和影片支援，無需 Flash。以下程式碼基於 HTML、CSS 和 Java 腳本運作。您可以將您的本地 Mp3 檔案拖放至容器中。
HTML features, include native audio and video support without the need for Flash.Below code works based HTML,CSS and Java Script.You can drag and drop your local Mp3 files into the container.
Example
我們來看一下以下範例，我們將建立一個地方音訊視覺化器
Let’s look at the following example, where we are going to create a local audio visualizer
<!DOCTYPE html>
<html>
<style>
#instructions {
width: 100%;
text-align: center;
top: 50%;
margin-top: -100px;
color: #DE3163;
}
#container {
position: absolute;
width: 100%;
height: 100%;
background: #D5F5E3;
}
#canvas-container {
width: 600px;
height: 600px;
margin: auto;
position: relative;
top: 50%;
margin-top: -263px;
margin-right: -61px;
}
#canvas-copy {
opacity: 0.05;
-webkit-transform: scaleY(-1);
margin-top: -6px;
}
</style>
<body>
<div id="container">
<div id="canvas-container">
<canvas width=600 height=300 id="canvas"></canvas>
<canvas width=600 height=300 id="canvas-copy"></canvas>
</div>
<div id="instructions">
<a href="https://www.tutorialspoint.com/index.htm" align="center"> Tutorials Point</a>
<h2 style="font-family:verdana"> Drag Your Local MP3 Files </h2>
</div>
<div id="button"></div>
</div>
<script src="js.html"></script>
</body>
</html>现在，我们将使用上述 HTML 文件中提到的名称创建一个 javascript 文件。
Now, we are going to create a javascript file with the name mentioned in the above HTML file
<script>
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
window.onload = function() {
var element = document.getElementById('container')
dropAndLoad(element, init, "ArrayBuffer")
}
function dropAndLoad(dropElement, callback, readFormat) {
var readFormat = readFormat || "DataUrl"
dropElement.addEventListener('dragover', function(e) {
e.stopPropagation()
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
}, false)
dropElement.addEventListener('drop', function(e) {
e.stopPropagation()
e.preventDefault()
loadFile(e.dataTransfer.files[0])
}, false)
function loadFile(files) {
var file = files
var reader = new FileReader()
reader.onload = function(e) {
callback(e.target.result)
}
reader['readAs' + readFormat](file)
}
}
function init(arrayBuffer) {
document.getElementById('instructions').innerHTML = 'Audio Loading'
window.audioCtx = new AudioContext()
window.analyser = audioCtx.createAnalyser()
if (window.source) source.noteOff(0)
audioCtx.decodeAudioData(arrayBuffer, function(buffer) {
window.source = audioCtx.createBufferSource()
source.buffer = buffer
source.connect(analyser)
analyser.connect(audioCtx.destination)
source.start(0)
var viz = new simpleViz()
new visualizer(viz['update'], analyser)
document.getElementById('instructions').innerHTML = ''
})
}
function visualizer(visualization, analyser) {
var self = this
this.visualization = visualization
var last = Date.now()
var loop = function() {
var dt = Date.now() - last
var byteFreq = new Uint8Array(analyser.frequencyBinCount)
analyser.getByteFrequencyData(byteFreq)
last = Date.now()
self.visualization(byteFreq, dt)
requestAnimationFrame(loop)
}
requestAnimationFrame(loop)
}
function simpleViz(canvas) {
var self = this
this.canvas = document.getElementById('canvas')
this.ctx = this.canvas.getContext("2d")
this.copyCtx = document.getElementById('canvas-copy').getContext("2d")
this.ctx.fillStyle = '#fff'
this.barWidth = 10
this.barGap = 4
this.bars = Math.floor(this.canvas.width / (this.barWidth + this.barGap))
this.update = function(byteFreq) {
self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height)
var step = Math.floor(byteFreq.length / self.bars)
for (var i = 0; i < self.bars; i++) {
var barHeight = byteFreq[i * step]
self.ctx.fillRect(i * (self.barWidth + self.barGap), self.canvas.height - barHeight, self.barWidth, barHeight)
self.copyCtx.clearRect(0, 0, self.canvas.width, self.canvas.height)
self.copyCtx.drawImage(self.canvas, 0, 0)
}
}
}
</script>让我们将这两个文件合并，并观察我们将获得的输出。
Let’s combine both the file and observe the output we are going to get.
<!DOCTYPE html>
<html>
<style>
#instructions {
width: 100%;
text-align: center;
top: 50%;
margin-top: -100px;
color: #DE3163;
}
#container {
position: absolute;
width: 100%;
height: 100%;
background: #D5F5E3;
}
#canvas-container {
width: 600px;
height: 600px;
margin: auto;
position: relative;
top: 50%;
margin-top: -263px;
margin-right: -61px;
}
#canvas-copy {
opacity: 0.05;
-webkit-transform: scaleY(-1);
margin-top: -6px;
}
</style>
<body>
<div id="container">
<div id="canvas-container">
<canvas width=600 height=300 id="canvas"></canvas>
<canvas width=600 height=300 id="canvas-copy"></canvas>
</div>
<div id="instructions">
<a href="https://www.tutorialspoint.com/index.htm" align="center"> Tutorials Point</a>
<h2 style="font-family:verdana"> Drag Your Local MP3 Files </h2>
</div>
<div id="button"></div>
</div>
<script>
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
window.onload = function() {
var element = document.getElementById('container')
dropAndLoad(element, init, "ArrayBuffer")
}
function dropAndLoad(dropElement, callback, readFormat) {
var readFormat = readFormat || "DataUrl"
dropElement.addEventListener('dragover', function(e) {
e.stopPropagation()
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
}, false)
dropElement.addEventListener('drop', function(e) {
e.stopPropagation()
e.preventDefault()
loadFile(e.dataTransfer.files[0])
}, false)
function loadFile(files) {
var file = files
var reader = new FileReader()
reader.onload = function(e) {
callback(e.target.result)
}
reader['readAs' + readFormat](file)
}
}
function init(arrayBuffer) {
document.getElementById('instructions').innerHTML = 'Audio Loading'
window.audioCtx = new AudioContext()
window.analyser = audioCtx.createAnalyser()
if (window.source) source.noteOff(0)
audioCtx.decodeAudioData(arrayBuffer, function(buffer) {
window.source = audioCtx.createBufferSource()
source.buffer = buffer
source.connect(analyser)
analyser.connect(audioCtx.destination)
source.start(0)
var viz = new simpleViz()
new visualizer(viz['update'], analyser)
document.getElementById('instructions').innerHTML = ''
})
}
function visualizer(visualization, analyser) {
var self = this
this.visualization = visualization
var last = Date.now()
var loop = function() {
var dt = Date.now() - last
var byteFreq = new Uint8Array(analyser.frequencyBinCount)
analyser.getByteFrequencyData(byteFreq)
last = Date.now()
self.visualization(byteFreq, dt)
requestAnimationFrame(loop)
}
requestAnimationFrame(loop)
}
function simpleViz(canvas) {
var self = this
this.canvas = document.getElementById('canvas')
this.ctx = this.canvas.getContext("2d")
this.copyCtx = document.getElementById('canvas-copy').getContext("2d")
this.ctx.fillStyle = '#fff'
this.barWidth = 10
this.barGap = 4
this.bars = Math.floor(this.canvas.width / (this.barWidth + this.barGap))
this.update = function(byteFreq) {
self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height)
var step = Math.floor(byteFreq.length / self.bars)
for (var i = 0; i < self.bars; i++) {
var barHeight = byteFreq[i * step]
self.ctx.fillRect(i * (self.barWidth + self.barGap), self.canvas.height - barHeight, self.barWidth, barHeight)
self.copyCtx.clearRect(0, 0, self.canvas.width, self.canvas.height)
self.copyCtx.drawImage(self.canvas, 0, 0)
}
}
}
</script>
</body>
</html>当我们运行上述代码时，它将会生成输出，其中包括应用了 CSS 的文本，指示拖动本地 MP3 文件来播放音乐。
When we run the above code, it will generate an output consisting of the text applied with CSS indicating to drag the local MP3 file to play music.
Local Audio Player with play list
考虑以下示例，我们允许用户上传多个充当播放列表的本地 MP3。
Consider the following example, where we are allowing the user to upload the multiple local MP3 that acts a playlist.
<!DOCTYPE html>
<html>
<body style="background-color:#ABEBC6;">
<audio controls id="y" autoplay></audio>
<br>
<br>
<br>
<input type="file" id="x" multiple>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var x = document.getElementById("x"),
y = document.getElementById("y");
function next(n) {
var a = URL.createObjectURL(z[n]);
y.setAttribute('src', a);
y.play();
}
var _next = 0,
z,
len;
x.addEventListener('Change', function() {
z = x.z;
len = z.length;
if (len) {
next(_next);
}
});
y.addEventListener("Completed", function() {
_next += 1;
next(_next);
console.log(len, _next);
if ((len - 1) == _next) {
_next = -1;
}
});
</script>
</body>
</html>运行上述代码后，将弹出输出窗口，允许用户上传多个 mp3 文件，并自动在网页上播放。
On running the above code, the output window will pop up, allowing the user to upload multiple mp3 files and plays automatically on the webpage.