Просмотр исходного кода

automatically include audio files as clickable links

master
Dom SP 3 лет назад
Родитель
Сommit
d16557b6e7
4 измененных файлов: 102 добавлений и 1 удалений
  1. +9
    -0
      app/modules/filesinfolders.php
  2. +2
    -1
      app/views/tpl/index.html
  3. +59
    -0
      rsc/freaWebAudio.js
  4. +32
    -0
      rsc/init_audio.js

+ 9
- 0
app/modules/filesinfolders.php Просмотреть файл

@@ -14,6 +14,7 @@ class FilesInFolders {
'txt'=>array( 'txt', 'text', 'md' ),
'pic'=>array( 'jpg', 'jpeg', 'png', 'svg' ),
'tpl'=>array( 'html', 'htm', 'tpl' ),
'audio'=>array('mp3','wav','ogg'),
'csv'=>array( 'csv' )
);
public $config = array();
@@ -157,6 +158,14 @@ class FilesInFolders {
);
}
}
if (true) {
foreach ($this->structs[$domain_key]['audio'] as $key=>$file) {
$this->content[$domain][$key] = sprintf(
'<a href="%s" class="audio">%s</a><br>',
$file, $key
);
}
}
foreach($this->structs[$domain_key]['csv'] as $key=>$file) {
$csv = new \Modules\Ography($file,TRUE);
$str="<table>";

+ 2
- 1
app/views/tpl/index.html Просмотреть файл

@@ -22,6 +22,7 @@
<link href="/{{ @RESOURCES }}featherlight.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/{{ @RESOURCES }}jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/{{ @RESOURCES }}freaWebAudio.js"></script>
<script type="text/javascript" src="/{{ @RESOURCES }}script.js"></script>

<link type="text/css" href="/{{ @RESOURCES }}{{ @theme }}" rel="stylesheet" />
@@ -42,6 +43,6 @@
</check>
<script type="text/javascript" src="/{{ @RESOURCES }}featherlight.min.js"></script>
<script type="text/javascript" src="/{{ @RESOURCES }}init_audio.js"></script>
</body>
</html>

+ 59
- 0
rsc/freaWebAudio.js Просмотреть файл

@@ -0,0 +1,59 @@

function AudioTagSample() {

// initialize audio player
this.audio = new Audio();
this.isPlaying = false;
window.addEventListener('load', this.onload.bind(this), false);
}

AudioTagSample.prototype.onload = function() {
// Create the audio nodes.
this.source = context.createMediaElementSource(this.audio);

this.source.connect(context.destination);
};

AudioTagSample.prototype.click = function(link) {

var was_inactive = this.audio.paused
var was_the_same = this.audio.src == link.href

var controls = document.querySelectorAll('.controls');
for (i=0;i<controls.length;i++){
controls[i].classList.toggle("playing");
controls[i].classList.remove("fresh");
};

if (was_the_same) {
if (this.audio.paused) {
this.audio.play();
link.classList.remove("paused")
link.classList.add("playing")
} else {
this.audio.pause();
link.classList.remove("playing")
link.classList.add("paused")
}
} else {
if(this.link) {
this.link.classList.remove("playing")
this.link.classList.remove("paused")
}
this.audio.src = link.href;
this.link = link
this.audio.play();
link.classList.remove("paused")
link.classList.add("playing")
}

if (was_inactive) {
requestAnimFrame(this.draw.bind(this));
}
this.link = link;
};



+ 32
- 0
rsc/init_audio.js Просмотреть файл

@@ -0,0 +1,32 @@

context = new (window.AudioContext || window.webkitAudioContext)();
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();


var sample = new AudioTagSample({orientation:'horizontal',axisScale:'lin'});
var links = document.querySelectorAll('.audio');
for (i=0;i<links.length;i++){
links[i].addEventListener("click", function(ev) {
ev.preventDefault();
context.resume();
sample.click(ev.target);
});
}

function play_pause(el) {
if (sample.audio.paused) {
sample.click(sample.link);
} else {
sample.click(sample.link);
}
}

Загрузка…
Отмена
Сохранить