Move audio html out of js
This commit is contained in:
parent
a5dae0dbc2
commit
638ea75648
@ -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);
|
||||||
|
|
||||||
|
@ -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" />
|
||||||
|
Loading…
x
Reference in New Issue
Block a user