Mathias Markl
7 years ago
8 changed files with 95 additions and 139 deletions
-
7muk_web_preview_audio/README.md
-
2muk_web_preview_audio/__init__.py
-
14muk_web_preview_audio/__manifest__.py
-
6muk_web_preview_audio/doc/changelog.rst
-
51muk_web_preview_audio/doc/index.rst
-
38muk_web_preview_audio/static/description/index.html
-
112muk_web_preview_audio/static/lib/visualizer/visualizer.js
-
4muk_web_preview_audio/static/src/js/preview_handler.js
@ -1,7 +0,0 @@ |
|||||
# MuK Preview Audio |
|
||||
|
|
||||
Extendes the Preview Dialog to support audio. Currently the following audio extensions are supported: |
|
||||
|
|
||||
* Wav (*.wav, audio/wav) |
|
||||
* Ogg Theora Vorbis (*.ogg, audio/ogg) |
|
||||
* MP3 (*.mp3, audio/mpeg) |
|
||||
@ -1,9 +1,13 @@ |
|||||
|
`2.0.0` |
||||
|
------- |
||||
|
|
||||
|
- Migrated to Python 3 |
||||
|
|
||||
`1.1.0` |
`1.1.0` |
||||
------- |
------- |
||||
|
|
||||
- Lazy load javascript |
- Lazy load javascript |
||||
|
|
||||
|
|
||||
`1.0.0` |
`1.0.0` |
||||
------- |
------- |
||||
|
|
||||
|
|||||
@ -0,0 +1,51 @@ |
|||||
|
================= |
||||
|
MuK Preview Audio |
||||
|
================= |
||||
|
|
||||
|
Extendes the Preview Dialog to support images. Currently the following image extensions |
||||
|
are supported: |
||||
|
|
||||
|
* Wav (\*.wav, audio/wav) |
||||
|
* Ogg Theora Vorbis (\*.ogg, audio/ogg) |
||||
|
* MP3 (\*.mp3, audio/mpeg) |
||||
|
|
||||
|
Installation |
||||
|
============ |
||||
|
|
||||
|
To install this module, you need to: |
||||
|
|
||||
|
Download the module and add it to your Odoo addons folder. Afterward, log on to |
||||
|
your Odoo server and go to the Apps menu. Trigger the debug modus and update the |
||||
|
list by clicking on the "Update Apps List" link. Now install the module by |
||||
|
clicking on the install button. |
||||
|
|
||||
|
Configuration |
||||
|
============= |
||||
|
|
||||
|
No additional configuration is needed to use this module. |
||||
|
|
||||
|
Usage |
||||
|
============= |
||||
|
|
||||
|
Go to a binary that contains an audio file and open the preview dialog to view |
||||
|
the preview. |
||||
|
|
||||
|
Credits |
||||
|
======= |
||||
|
|
||||
|
Contributors |
||||
|
------------ |
||||
|
|
||||
|
* Mathias Markl <mathias.markl@mukit.at> |
||||
|
|
||||
|
Author & Maintainer |
||||
|
------------------- |
||||
|
|
||||
|
This module is maintained by the `MuK IT GmbH <https://www.mukit.at/>`_. |
||||
|
|
||||
|
MuK IT is an Austrian company specialized in customizing and extending Odoo. |
||||
|
We develop custom solutions for your individual needs to help you focus on |
||||
|
your strength and expertise to grow your business. |
||||
|
|
||||
|
If you want to get in touch please contact us via mail |
||||
|
(sale@mukit.at) or visit our website (https://mukit.at). |
||||
@ -1,112 +0,0 @@ |
|||||
/********************************************************************************** |
|
||||
* |
|
||||
* Copyright (C) 2017 MuK IT GmbH |
|
||||
* |
|
||||
* This program is free software: you can redistribute it and/or modify |
|
||||
* it under the terms of the GNU Affero General Public License as |
|
||||
* published by the Free Software Foundation, either version 3 of the |
|
||||
* License, or (at your option) any later version. |
|
||||
* |
|
||||
* This program is distributed in the hope that it will be useful, |
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|
||||
* GNU Affero General Public License for more details. |
|
||||
* |
|
||||
* You should have received a copy of the GNU Affero General Public License |
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
||||
* |
|
||||
**********************************************************************************/ |
|
||||
|
|
||||
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext; |
|
||||
|
|
||||
function Visualizer($audio, $container, $canvas) { |
|
||||
var _this = this; |
|
||||
|
|
||||
this.$audio = $audio; |
|
||||
this.$container = $container; |
|
||||
this.$canvas = $canvas; |
|
||||
|
|
||||
this.audio = $audio.get(0); |
|
||||
this.canvas = $canvas.get(0); |
|
||||
|
|
||||
this.audioCtx = new AudioContext(); |
|
||||
this.analyser = this.audioCtx.createAnalyser(); |
|
||||
this.audioSrc = this.audioCtx.createMediaElementSource(this.audio); |
|
||||
this.frequencyData = new Uint8Array(this.analyser.frequencyBinCount); |
|
||||
this.smoothEndingCounter = 0; |
|
||||
|
|
||||
this.audioSrc.connect(this.analyser); |
|
||||
this.analyser.connect(this.audioCtx.destination); |
|
||||
|
|
||||
this.ctx = this.canvas.getContext('2d'), |
|
||||
|
|
||||
this.capYPositionArray = []; |
|
||||
|
|
||||
this.$audio.bind('play', function (e) { |
|
||||
_this.smoothEndingCounter = 0; |
|
||||
_this.calcCanvas(); |
|
||||
_this.renderFrame(); |
|
||||
}); |
|
||||
|
|
||||
this.map = function (num, in_min, in_max, out_min, out_max) { |
|
||||
return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; |
|
||||
} |
|
||||
|
|
||||
this.calcCanvas = function() { |
|
||||
_this.canvas.width = _this.$container.width() !== 0 ? _this.$container.width() : 650; |
|
||||
_this.canvas.height = _this.$container.height() !== 0 ? _this.$container.height() : 360; |
|
||||
_this.cwidth = _this.canvas.width; |
|
||||
_this.cheight = _this.canvas.height - 4; |
|
||||
_this.meterWidth = 10; |
|
||||
_this.capHeight = 4; |
|
||||
_this.capStyle = '#FFF'; |
|
||||
_this.meterNum = (_this.$container.width() !== 0 ? _this.$container.width() : 650) / (10 + 2); |
|
||||
|
|
||||
_this.gradient = _this.ctx.createLinearGradient(0, 0, 0, _this.cheight); |
|
||||
_this.gradient.addColorStop(1, '#1CD5FB'); |
|
||||
_this.gradient.addColorStop(0.75, '#19DECA'); |
|
||||
_this.gradient.addColorStop(0.5, '#28F5A6'); |
|
||||
_this.gradient.addColorStop(0.25, '#19DE5A'); |
|
||||
_this.gradient.addColorStop(0, '#1CFB27'); |
|
||||
} |
|
||||
|
|
||||
this.renderFrame = function() { |
|
||||
if(_this.$container.width() !== _this.cwidth) { |
|
||||
_this.calcCanvas(); |
|
||||
} |
|
||||
|
|
||||
_this.ctx.clearRect(0, 0, _this.cwidth, _this.cheight); |
|
||||
|
|
||||
_this.analyser.getByteFrequencyData(_this.frequencyData); |
|
||||
var step = Math.round(_this.frequencyData.length / _this.meterNum); |
|
||||
|
|
||||
for (var i = 0; i < _this.meterNum; i++) { |
|
||||
var valueBar = _this.map(_this.frequencyData[i * step], 0, 255, 0, _this.cheight); |
|
||||
var valueCap = _this.map(_this.frequencyData[i * step], 0, 255, 0, _this.canvas.height); |
|
||||
|
|
||||
if (_this.capYPositionArray.length < Math.round(_this.meterNum)) { |
|
||||
_this.capYPositionArray.push(valueCap); |
|
||||
}; |
|
||||
|
|
||||
_this.ctx.fillStyle = _this.gradient; |
|
||||
_this.ctx.fillRect(i * 12, _this.cheight - valueBar, _this.meterWidth, _this.cheight); |
|
||||
|
|
||||
_this.ctx.fillStyle = _this.capStyle; |
|
||||
if (valueCap < _this.capYPositionArray[i]) { |
|
||||
_this.ctx.fillRect(i * 12, _this.canvas.height - (--_this.capYPositionArray[i]), _this.meterWidth, _this.capHeight); |
|
||||
} else { |
|
||||
_this.ctx.fillRect(i * 12, _this.canvas.height - valueCap, _this.meterWidth, _this.capHeight); |
|
||||
_this.capYPositionArray[i] = valueCap; |
|
||||
}; |
|
||||
} |
|
||||
|
|
||||
if(!_this.audio.paused) { |
|
||||
requestAnimationFrame(_this.renderFrame); |
|
||||
} else { |
|
||||
if(_this.smoothEndingCounter < 500) { |
|
||||
requestAnimationFrame(_this.renderFrame); |
|
||||
} |
|
||||
_this.smoothEndingCounter++; |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue