forked from kitodo/kitodo-production
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request kitodo#5803 from markusweigelt/audio-waveform
Visualisation of audio as a waveform
- Loading branch information
Showing
18 changed files
with
323 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 14 additions & 0 deletions
14
...ment/src/main/resources/db/migration/V2_125__Add_audio_media_view_waveform_to_project.sql
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| -- | ||
| -- (c) Kitodo. Key to digital objects e. V. <[email protected]> | ||
| -- | ||
| -- This file is part of the Kitodo project. | ||
| -- | ||
| -- It is licensed under GNU General Public License version 3 or later. | ||
| -- | ||
| -- For the full copyright and license information, please read the | ||
| -- GPL3-License.txt file that was distributed with this source code. | ||
| -- | ||
|
|
||
| -- | ||
| -- Migration: Add column for state of audio waveform in media view to project table. | ||
| ALTER TABLE project ADD mediaView_audio_waveform TINYINT(1) NOT NULL DEFAULT 0; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
29 changes: 29 additions & 0 deletions
29
Kitodo/src/main/webapp/WEB-INF/resources/js/libs/wavesurfer/LICENSE
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| BSD 3-Clause License | ||
|
|
||
| Copyright (c) 2012-2023, katspaugh and contributors | ||
| All rights reserved. | ||
|
|
||
| Redistribution and use in source and binary forms, with or without | ||
| modification, are permitted provided that the following conditions are met: | ||
|
|
||
| * Redistributions of source code must retain the above copyright notice, this | ||
| list of conditions and the following disclaimer. | ||
|
|
||
| * Redistributions in binary form must reproduce the above copyright notice, | ||
| this list of conditions and the following disclaimer in the documentation | ||
| and/or other materials provided with the distribution. | ||
|
|
||
| * Neither the name of the copyright holder nor the names of its | ||
| contributors may be used to endorse or promote products derived from | ||
| this software without specific prior written permission. | ||
|
|
||
| THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" | ||
| AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | ||
| IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE | ||
| DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE | ||
| FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL | ||
| DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR | ||
| SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER | ||
| CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, | ||
| OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE | ||
| OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
2 changes: 2 additions & 0 deletions
2
Kitodo/src/main/webapp/WEB-INF/resources/js/libs/wavesurfer/wavesurfer.esm.js
Large diffs are not rendered by default.
Oops, something went wrong.
118 changes: 118 additions & 0 deletions
118
Kitodo/src/main/webapp/WEB-INF/resources/js/media_detail_audio_waveform.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| /** | ||
| * (c) Kitodo. Key to digital objects e. V. <[email protected]> | ||
| * | ||
| * This file is part of the Kitodo project. | ||
| * | ||
| * It is licensed under GNU General Public License version 3 or later. | ||
| * | ||
| * For the full copyright and license information, please read the | ||
| * GPL3-License.txt file that was distributed with this source code. | ||
| */ | ||
|
|
||
| import WaveSurfer from './libs/wavesurfer/wavesurfer.esm.js.jsf'; | ||
|
|
||
| class AudioWaveform { | ||
| #audioElement; | ||
| #wavesurfer; | ||
| #buildTimeout; | ||
| #loader; | ||
| #peaksCache = []; | ||
|
|
||
| constructor() { | ||
| this.init(); | ||
| } | ||
|
|
||
| init() { | ||
| let self = this; | ||
| this.#audioElement = document.querySelector('audio.mediaPreviewItem'); | ||
| if (this.#audioElement && this.#audioElement.getAttribute("data-audio-waveform") !== "initialized") { | ||
| this.#audioElement.setAttribute("data-audio-waveform", "initialized"); | ||
|
|
||
| // add a loader to visualize loading process | ||
| this.#loader = document.createElement("div"); | ||
| this.#loader.innerHTML = '<i class="fa fa-spinner fa-spin"/>'; | ||
| this.#loader.classList.add('loader'); | ||
| this.#audioElement.parentNode.insertBefore(this.#loader, this.#audioElement); | ||
|
|
||
| // when the user agent can play the media | ||
| this.#audioElement && this.#audioElement.addEventListener("canplay", () => { | ||
| // Prevent browser crashes during audio decoding when multiple rapid clicks, such as double-clicking, occur. | ||
| clearTimeout(this.#buildTimeout); | ||
| self.#buildTimeout = setTimeout(function() { | ||
| self.#build(); | ||
| }, 500); | ||
| }, {once: true}); | ||
|
|
||
| } | ||
| } | ||
|
|
||
| #build() { | ||
| let self = this; | ||
| // wavesurfer uses the 'src' attribute of the audio element, and we add this attribute based on the browser's current source selection | ||
| this.#audioElement.src = this.#audioElement.currentSrc; | ||
|
|
||
| // get the media id from the source parameter | ||
| const urlParams = new URLSearchParams(this.#audioElement.src); | ||
| let mediaId = urlParams.get('mediaId'); | ||
|
|
||
| let waveContainer = document.createElement("div"); | ||
| waveContainer.setAttribute("id", "wave-container"); | ||
| waveContainer.onclick = function () { | ||
| self.#wavesurfer.playPause(); | ||
| }; | ||
| waveContainer.style.width = "90%"; | ||
| waveContainer.style.display = "none"; | ||
| this.#audioElement.parentNode.insertBefore(waveContainer, this.#audioElement); | ||
|
|
||
| this.#wavesurfer = WaveSurfer.create({ | ||
| container: document.getElementById(waveContainer.getAttribute("id")), | ||
| height: 100, | ||
| waveColor: "#f3f3f3", | ||
| progressColor: "#ff4e00", | ||
| cursorColor: "#ffffff", | ||
| media: this.#audioElement, | ||
| minPxPerSec: 0, | ||
| peaks: this.#peaksCache[mediaId] | ||
| }); | ||
|
|
||
| this.#wavesurfer.on("decode", function () { | ||
| // cache peaks after when audio has been decoded | ||
| self.#peaksCache[mediaId] = self.#wavesurfer.getDecodedData().getChannelData(0); | ||
| }); | ||
|
|
||
| this.#wavesurfer.on("ready", function () { | ||
| waveContainer.style.display = "block"; | ||
| self.#loader.style.display = "none"; | ||
|
|
||
| let waveToolsContainer = document.getElementById("audioWaveformTools"); | ||
| const waveToolsSlider = waveToolsContainer.querySelector('input[type="range"]'); | ||
|
|
||
| waveToolsSlider.addEventListener('input', (e) => { | ||
| const minPxPerSec = e.target.valueAsNumber; | ||
| self.#wavesurfer.zoom(minPxPerSec); | ||
| }); | ||
|
|
||
| waveToolsContainer.querySelectorAll('input[type="checkbox"]').forEach((input) => { | ||
| input.onchange = (e) => { | ||
| self.#wavesurfer.setOptions({ | ||
| [input.value]: e.target.checked, | ||
| }); | ||
| } | ||
| }); | ||
| const jumpButtons = document.getElementsByClassName("audio-waveform-tools-jump-button"); | ||
| Array.from(jumpButtons).forEach(function (jumpButton) { | ||
| jumpButton.addEventListener('click', function () { | ||
| let jumpSeconds = parseInt(this.getAttribute("data-audio-waveform-tools-jump-seconds")); | ||
| self.#wavesurfer.setTime(self.#wavesurfer.getCurrentTime() + jumpSeconds); | ||
| }); | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| const audioWaveform= new AudioWaveform(); | ||
|
|
||
| document.addEventListener("kitodo-metadataditor-mediaview-update", function () { | ||
| audioWaveform.init(); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.