Angeliki
/
eaiaiaiaoi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

draggable together with recording scripts work

Browse Source
master
Angeliki 5 years ago
parent 9a03746b87
commit 8f70fef1c8
5 changed files with 155 additions and 168 deletions
Show Stats Download Patch File Download Diff File

1
index.php
Unescape Escape View File

@ -9,6 +9,7 @@
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/draggable.js"></script>
<script src="js/main.js"></script>
<!-- <link href="styles/app.css" rel="stylesheet" type="text/css">
-->

53
js/draggable.js
Unescape Escape View File

@ -0,0 +1,53 @@
// draggable
$(document).ready(function() {
var a = 3;
$('.draggable').draggable({
start: function(event, ui) { $(this).css("z-index", a++); }
});
// $('#resize').resizable({handles: 'se'}).draggable({
// start: function(event, ui) { $(this).css("z-index", a++); }
// });;
// font size relative to div draggable/resizable size
var $wrapper = $(".scaleable-wrapper");
$wrapper.each(function (d) {
var $this = $(this);
// var elHeight = $this.outerHeight();
var elWidth = $this.outerWidth();
$this.resizable({
resize: doResize
});
function doResize(event, ui) {
var scale, origin;
scale = Math.min(
// ui.size.height / elHeight,
ui.size.width / elWidth
);
// scale=1.0;
// scale=2*scale
$this.css({
// transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
transform: "translate(0%, 0%) " + "scale(" + scale + ")"
});
}
var starterData = {
size: {
// height: $this.height(),
width: $this.width()
}
}
// console.log("starterData", starterData, this);
doResize(null, starterData);
});
});

65
js/main.js
Unescape Escape View File

@ -1,64 +1,4 @@
// designed by Angeliki Diakrousi
// draggable
$(document).ready(function() {
var a = 3;
$('.draggable').draggable({
start: function(event, ui) { $(this).css("z-index", a++); }
});
// $('#resize').resizable({handles: 'se'}).draggable({
// start: function(event, ui) { $(this).css("z-index", a++); }
// });;
// font size relative to div draggable/resizable size
var $wrapper = $(".scaleable-wrapper");
$wrapper.each(function (d) {
var $this = $(this);
// var elHeight = $this.outerHeight();
var elWidth = $this.outerWidth();
$this.resizable({
resize: doResize
});
function doResize(event, ui) {
var scale, origin;
scale = Math.min(
// ui.size.height / elHeight,
ui.size.width / elWidth
);
// scale=1.0;
// scale=2*scale
$this.css({
// transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
transform: "translate(0%, 0%) " + "scale(" + scale + ")"
});
}
var starterData = {
size: {
// height: $this.height(),
width: $this.width()
}
}
// console.log("starterData", starterData, this);
doResize(null, starterData);
});
// scripts for tab button
function openCity(evt, cityName) {
@ -80,7 +20,7 @@ $(document).ready(function() {
var a1 = document.getElementById("a1"),
a2 = document.getElementById("a2"),
but = document.getElementById("but");
but.addEventListener("click", function () {
but.addEventListener("click", function () {
if (a1.paused) {
a1.play();
a2.play();
@ -263,9 +203,8 @@ window.onclick2 = function(event) {
}
}
}
}
};
// for thesis
// var socket = new WebSocket(`wss://hypothes.is/ws?access_token=${'6879-n8AksBoSB7kYoQ3eEwzpEr3nFQEmSp3XN-0PcKL_Sik'}`)
});

2
player.html
Unescape Escape View File

@ -73,7 +73,7 @@ $("#katalin").click(function(){
<!-- recordings -->
<!-- draggable audio tags/recordings -->
<section>

202
podcast1.php
Unescape Escape View File

@ -2,113 +2,13 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="js/main.js"></script>
</head>
<body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/mp3recorder.js"></script>
<!-- scripts for recorder -->
<script type="text/javascript">
var audio_context;
function __log(e, data) {
log.innerHTML += "\n" + e + " " + (data || '');
}
$(function() {
try {
// webkit shim
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
window.URL = window.URL || window.webkitURL;
var audio_context = new AudioContext;
__log('Audio context set up.');
__log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
} catch (e) {
alert('No web audio support in this browser!');
}
$('.recorder .start').on('click', function() {
$this = $(this);
$recorder = $this.parent();
navigator.getUserMedia({audio: true}, function(stream) {
var recorderObject = new MP3Recorder(audio_context, stream, { statusContainer: $recorder.find('.status'), statusMethod: 'replace' });
$recorder.data('recorderObject', recorderObject);
recorderObject.start();
}, function(e) { });
});
$('.recorder .stop').on('click', function() {
$this = $(this);
$recorder = $this.parent();
recorderObject = $recorder.data('recorderObject');
recorderObject.stop();
recorderObject.exportMP3(function(base64_data) {
var url = 'data:audio/mp3;base64,' + base64_data;
var au = document.createElement('audio');
document.getElementById("playerContainer").innerHTML = "";
// console.log(url)
var duc = document.getElementById("dataUrlcontainer");
duc.innerHTML = url;
au.controls = true;
au.src = url;
//$recorder.append(au);
$('#playerContainer').append(au);
recorderObject.logStatus('');
});
});
});
</script>
<script>
function upload(){
var dataURL = document.getElementById("dataUrlcontainer").innerHTML;
$.ajax({
type: "POST",
url: "scripts/uploadMp3.php",
data: {
base64: dataURL
}
}).done(function(o) {
console.log('saved');
});
}
</script>
<!-- draggable -->
<script>
$(document).ready(function() {
var a = 3;
$('.draggable').draggable({
start: function(event, ui) { $(this).css("z-index", a++); }
});
});
</script>
<br><br>
<h3 id="box-title" style="width: 200px; left: 45%; position: absolute;">
"Mediating Speech"
@ -233,7 +133,103 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
<!-- <script src="scripts/app.js"></script> -->
<!-- script for subs and sound -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/mp3recorder.js"></script>
<script src="js/draggable.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/main.js"></script>
<!-- scripts for recorder -->
<script type="text/javascript">
var audio_context;
function __log(e, data) {
log.innerHTML += "\n" + e + " " + (data || '');
}
$(function() {
try {
// webkit shim
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
window.URL = window.URL || window.webkitURL;
var audio_context = new AudioContext;
__log('Audio context set up.');
__log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
} catch (e) {
alert('No web audio support in this browser!');
}
$('.recorder .start').on('click', function() {
$this = $(this);
$recorder = $this.parent();
navigator.getUserMedia({audio: true}, function(stream) {
var recorderObject = new MP3Recorder(audio_context, stream, { statusContainer: $recorder.find('.status'), statusMethod: 'replace' });
$recorder.data('recorderObject', recorderObject);
recorderObject.start();
}, function(e) { });
});
$('.recorder .stop').on('click', function() {
$this = $(this);
$recorder = $this.parent();
recorderObject = $recorder.data('recorderObject');
recorderObject.stop();
recorderObject.exportMP3(function(base64_data) {
var url = 'data:audio/mp3;base64,' + base64_data;
var au = document.createElement('audio');
document.getElementById("playerContainer").innerHTML = "";
// console.log(url)
var duc = document.getElementById("dataUrlcontainer");
duc.innerHTML = url;
au.controls = true;
au.src = url;
//$recorder.append(au);
$('#playerContainer').append(au);
recorderObject.logStatus('');
});
});
});
</script>
<script>
function upload(){
var dataURL = document.getElementById("dataUrlcontainer").innerHTML;
$.ajax({
type: "POST",
url: "scripts/uploadMp3.php",
data: {
base64: dataURL
}
}).done(function(o) {
console.log('saved');
});
}
</script>
<!-- script for subs and sound -->
<script>
var dialogueTimings = [10,24,28,58,115,120,124,134,138,142,152,160],
dialogues = document.querySelectorAll('#transcript>div'),
@ -260,8 +256,6 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
</body>
</html>

Write Preview
Loading…
Cancel
Save