Move audio html out of js

This commit is contained in:
Boris Bobrov 2017-04-02 20:50:33 +03:00
parent a5dae0dbc2
commit 638ea75648
2 changed files with 10 additions and 10 deletions

View File

@ -116,6 +116,10 @@ var audioPlayer = new Object();
var im = audioPlayer.imageElement; var im = audioPlayer.imageElement;
var pos = (e.offsetX || e.originalEvent.layerX) / im.width(); var pos = (e.offsetX || e.originalEvent.layerX) / im.width();
console.log('pos', (e.offsetX || e.originalEvent.layerX) / im.width())
console.log('setting current time to',
pos * audioPlayer.audioElement.duration)
audioPlayer.audioElement.currentTime = pos * audioPlayer.audioElement.duration; audioPlayer.audioElement.currentTime = pos * audioPlayer.audioElement.duration;
audioPlayer.audioElement.play(); audioPlayer.audioElement.play();
audioPlayer.setState(audioPlayer.PLAYING); audioPlayer.setState(audioPlayer.PLAYING);
@ -200,19 +204,9 @@ var audioPlayer = new Object();
* Attach the player to an image element * Attach the player to an image element
*/ */
console.log(imageElement); console.log(imageElement);
var im = $(imageElement); var im = $(imageElement);
audioPlayer.imageElement = im; audioPlayer.imageElement = im;
$('<div class="playhead"></div>').appendTo(im.parent());
$('<div class="buffered-indicators"></div>').appendTo(im.parent());
$('<div class="seekbar"></div>').appendTo(im.parent());
$('<div class="audio-control-play-pause paused">▶</div>').appendTo(im.parent());
$('<div class="audio-currentTime">00:00</div>').appendTo(im.parent());
$('<input type="range" class="audio-volume"'
+'value="1" min="0" max="1" step="0.001" />').appendTo(im.parent());
$('.audio-spectrogram').trigger('attachedControls');
}; };
})(audioPlayer); })(audioPlayer);

View File

@ -30,6 +30,12 @@
<div class="audio-media"> <div class="audio-media">
{% if 'spectrogram' in media.media_files %} {% if 'spectrogram' in media.media_files %}
<div class="audio-spectrogram"> <div class="audio-spectrogram">
<div class="playhead"></div>
<div class="buffered-indicators"></div>
<div class="seekbar"></div>
<div class="audio-control-play-pause paused"></div>
<div class="audio-currentTime">00:00</div>
<input type="range" class="audio-volume" value="1" min="0" max="1" step="0.001" />
<img src="{{ request.app.public_store.file_url( <img src="{{ request.app.public_store.file_url(
media.media_files.spectrogram) }}" media.media_files.spectrogram) }}"
alt="Spectrogram" /> alt="Spectrogram" />