I am trying to use the WaveSurfer javascript library in my Ionic 2 application.
I put the min.js below my www folder, then i import it in the index.html, and i declared the WaveSurfer variable in my .ts file.
initContainer() {
this.wavesurfer = WaveSurfer.create({
container: document.getElementById("container"),
waveColor: 'violet',
progressColor: 'purple'
});
this.wavesurfer.load(this.filePath + this.directoryName + "/" + this.audioFileName);
}
I initialize the container.
<div id="container"><wave style="display: block; position: relative; -webkit-user-select: none; height: 128px; width: 100%; overflow-x: auto; overflow-y: hidden;"><wave style="position: absolute; z-index: 2; left: 0px; top: 0px; bottom: 0px; overflow: hidden; width: 0px; display: none; box-sizing: border-box; border-right-style: solid; border-right-width: 1px; border-right-color: rgb(51, 51, 51);"><canvas style="position: absolute; left: 0px; top: 0px; bottom: 0px;"></canvas></wave><canvas style="position: absolute; z-index: 1; left: 0px; top: 0px; bottom: 0px;"></canvas></wave></div>
The container what has been created, so i think the import is working well.
play() {
this.wavesurfer.play();
}
After i push the play button, nothing happens, and the container is empty.
So the question is, can i use this library to visualize my audio on Android?
Or I just made a mistake somewhere?
(By the way, i tried my "own" audio files, which have been recorded with cordova-audio-input (i tried with cordova-media-plugin too), moreover default rightones. All of them show empty container, and they do not start.)
Any help would be appreciated.
I managed to solve my problem. Instead of using path, i create a base64 URL from the audio, with cordova file plugin (readAsDataURL()), and now it's working properly.
However the ready event does not work to me,
wavesurfer.on('ready', function () {
this.wavesurfer.play();
});
I just use it without the ready event, because i use it in a function, when the wavesurfer object has to be ready yet,
this.wavesurfer.play();
Now it is working, and it is epic (although it is a little bit slow, when i tried it with a one minute audio, so if i record an eight hour audio that will hurt, but that is already an another problem).
Edit:
I have to fix myself, because the on-ready event is working, only i have to bind the global variable to the event somehow.
Related
I have a very basic WebActivity that serves up a page that has the styling of
CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Next, edit add some HTML around your embed code.
HTML
<div class="video-container"><iframe width="853" height="480" src="https://www.youtube.com/embed/xxxxxx" frameborder="0" allowfullscreen</iframe</div>
If I view this page with the browser on the device, the page loads and the video plays just fine.
However if I use a webview programmed into my app, and load the page,clicking on the like, I get a message on the youtube video window (after the loading spinner) of "An error occurred. Please try again later (Playback ID: xxxxxx) Learn More"
of which learn more does not display anything useful. Idea's on how to go about seeing what is going on? The Android Studio logcat is not displaying any issues?
so it turns out that there are a few more params needed to play embeded iframe videos from YouTube.
Had to add the following to the end of the url string
src="https://www.youtube.com/embed/xxxxxxxxx?version=3&enablejsapi=1"
I have create a demo for it. You may visit my github link
I've been using Jsoup to parse this site, and it was working great until the introduced a "loader", so now I get this answer:
<html>
<head>
<style>.loader-walk{width: 100px; height: 40px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}.loader-walk > div{content: ""; width: 20px; height: 20px; background: #2196F3; border-radius: 100%; position: absolute; -webkit-animation: animate 2s linear infinite; animation: animate 2s linear infinite;}.loader-walk > div:nth-of-type(1){-webkit-animation-delay: -.4s; animation-delay: -.4s;}.loader-walk > div:nth-of-type(2){-webkit-animation-delay: -.8s; animation-delay: -.8s;}.loader-walk > div:nth-of-type(3){-webkit-animation-delay: -1.2s; animation-delay: -1.2s;}.loader-walk > div:nth-of-type(4){-webkit-animation-delay: -1.6s; animation-delay: -1.6s;}#-webkit-keyframes animate{0%{left: 100px; top: 0;}80%{left: 0; top: 0;}85%{left: 0; top: -20px; width: 20px; height: 20px;}90%{width: 40px; height: 15px;}95%{left: 100px; top: -20px; width: 20px; height: 20px;}100%{left: 100px; top: 0;}}#keyframes animate{0%{left: 100px; top: 0;}80%{left: 0; top: 0;}85%{left: 0; top: -20px; width: 20px; height: 20px;}90%{width: 40px; height: 15px;}95%{left: 100px; top: -20px; width: 20px; height: 20px;}100%{left: 100px; top: 0;}}</style>
<title>Loading</title>
</head>
<body>
<script type="text/javascript" src="/aes.min.js" ></script><script>function toNumbers(d){var e=[];d.replace(/(..)/g,function(d){e.push(parseInt(d,16))});return e}function toHex(){for(var d=[],d=1==arguments.length&&arguments[0].constructor==Array?arguments[0]:arguments,e="",f=0;f<d.length;f++)e+=(16>d[f]?"0":"")+d[f].toString(16);return e.toLowerCase()}var a=toNumbers("a0623cecb54e0306f536ee8964960ca0"),b=toNumbers("d4e9cfdbae6dc103d3b28027ee549f5a"),c=toNumbers("dababf3e77151157fd19e2165cb9e367");document.cookie="BPC="+toHex(slowAES.decrypt(c,2,a,b))+"; expires=Thu, 31-Dec-37 23:55:55 GMT; path=/";document.location.href="http://curaj.tv/";</script>
<div class="loader-walk">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
I've playing with this for a few weeks and cannot get past this wall.
I could load the page in a background webView and parse it from there, but is not the way.
So how do I get past this "animation" screen?
P.S. I'm new to Jsoup, so please no hate.
Interesting hints given by JonasCz:
Load the page in your desktop browser, open up the network tab of the developer tools, and see what It's loading and from where- it's very likely loading some JSON or something. Then it's just a matter of hitting the same URL with your code, get the data it returns, and figure out how to process it. ,You can also check out their script, maybe you can reverse enfpgineer it and figure out how it works. #Zack, WebView is very slow for these kind of things, and does not work well when used in the background.
You'll probably also have to extract some of the data from the page - in the second script tag there's some data which you'll probably have to send to the server with your request to get what you want. Extract this with a regex or something. Essentially, you'll have to emulate what the JavaScript does in your code.
My website http://galnova.com/ has just been given a responsive upgrade. It is fine on browsers but when I look at it on my samsung device the page wont scroll and it shakes like crazy. I could not find any error in the footer class or the structure itself but I am curious to why this is happening.
<footer>
<div class="wrap">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png" /></a><br />This work by <a xmlns:cc="http://creativecommons.org/ns#" href="http://www.galnova.com" property="cc:attributionName" rel="cc:attributionURL">Keith Jeter</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License</a>.<!--<br />Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="http://www.galnova.com" rel="dct:source">http://www.galnova.com</a>.-->
<p class="pull-right">Back to top</p>
<p>© 2015 Galaxy Supernova · <!--Privacy · Terms--></p>
</div>
</footer>
Try adding a defined height to your footer and report back with any effects.
Like so:
#media (max-width: 767px)
footer {
border-radius: 0!important;
border: none!important;
margin: 0!important;
height: 400px;
}
EDIT: Disregard the above; the problem is coming from the Pirobox overlay plugin. From a CSS perspective, a quick fix I noticed is to add overflow: hidden to the .piro_html class in the Pirobox stylesheet you reference, like so:
.piro_html {
position: absolute;
top: 0;
left: 0;
padding: 0;
width: 500px;
height: 500px;
margin: 0;
display: block;
padding: 0;
z-index: 150001;
padding: 0;
overflow: hidden;
}
Doing this causes you to lose the little "X" closure box, but since you can tap anywhere on the exposed body copy to escape the lightbox, that seems to be an acceptable and clean solution. You could also look into playing with the jQuery code.
Let me know if this works for you.
There's this website I've been working on for a client of mine and I've been working on the mobile layout. I decided to use a flexbox layout for the overall website, but for some odd reason, the stock android web browser for 4.4.2 isn't loading any of my elements that are using flexbox. Chrome for Android loads all my elements using flexbox just fine. I can't be too sure of what's happening, but any help that can be given would be great. All my code is on "hoopactivation.x10.mx" if you use the developer tools. If need be, I can also post my code on here if neccesarry (Which will probably happen anyhow. I'm just not near my laptop right now).
I don’t have any specific code to post, but I’ve had some interesting issues with flexbox myself. I found the blog post at http://thatemil.com/blog/2013/11/03/sticky-footers-flexbox-and-ie10/ very useful with explaining what you need to do to support other browsers. I was using the "modern" standard of flexbox until I found out it wasn’t working on Android, and found that blog post, so hopefully it’ll help. For the record, here is my CSS for the sticky footer:
/*
Sticky Footer - Flexbox
*/
.flexboxtweener, .flexboxtweener>body {
height: 100%; /* IE 10 */
}
.flexbox {
body {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex; /* Safari */
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
main {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex: 1 0 auto;
}
}
/*
Sticky Footer - w/ JS, no flexbox
*/
html.js.no-flexbox {
position: relative;
min-height: 100%;
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
}
/*
Sticky Footer - no JS, no flexbox
*/
// x-small
html.no-js {
main {
margin-bottom: 508px;
}
footer {
height: 508px;
}
}
#media (min-width: #screen-md-min) {
.no-js main {
margin-bottom: 210px;
}
.no-js footer {
height: 210px;
}
}
That’s in LESS and using some Bootstrap mixins, but hopefully that helps!
on some Android, flexbox is not working on inline elements, which seems like the flowing elements are gone.
To solve this, you have to force the flowing item to display:block. I've tried this and it works, you can see the detail here.
http://browser.colla.me/show/flexbox_make_element_collapse_height_0
In the Android default browser, I can't get :active or :hover to work at all. I know :hover and :active aren't recommended for use on mobile, but considering they work consistently everywhere except the default Android browser, I figured I'd try it. This code works fine on iOS and Windows Phone, but not on Android, and I can't figure out why.
CSS:
* {
font-family: Arial, sans-serif;
font-size: 14px;
}
#clickBox {
background: #CCC;
padding: 10px;
text-align: center;
width: 100px;
}
#hiddenBox {
background: #BBB;
height: 0;
overflow: hidden;
text-align: center;
transition: height 0.5s;
width: 120px;
}
#clickBox:active ~ #hiddenBox, #clickBox ~ #hiddenBox:active, #clickBox:hover ~ #hiddenBox, #clickBox ~ #hiddenBox:hover {
height: 50px;
}
HTML:
<section id="clickBox" aria-haspopup="true">
Click here!
</section>
<section id="hiddenBox">
This appears!
</section>
JS Fiddle: http://jsfiddle.net/gDRK2/1/
I figured this out. For some reason, Android was firing the :hover event only when the user rotated the phone. I have no idea why that would be, but it is.
So, this is how I fixed it:
if (navigator.userAgent.toLowerCase().indexOf("android") > -1) {
$(document).ready(function() {
$("nav").children("a").click(function(e) {
e.preventDefault();
$(this).next("ul").css("transform","rotate(90deg)");
$(this).next("ul").css("transform","rotate(0deg)");
});
});
};
Basically, I rotate the thing I want to appear on hover, then immediately rotate it back. It causes the :hover to work as expected. It makes literally no sense to me, but it works.
If anyone has any questions about implementing this, please let me know.