I am trying to embed audio files on a website for a client (who composes music as her job).
Since she is very specific about quality, she gave me a 20 minute mp3 track # 320 Kbps (approx 50Mb). This track would ideally autoplay on the home page of the website when we arrive on the website, but have controls to pause it if needed.
There will be other players elsewhere (not on autoplay, though), so I need to find a way to do all this with the same look, in a way that I understand and that's simple to install (I'm not so good with JS). Also, I need it to work on all devices, no flash.
I first tried embedding with HTML5 (simple to use, no-flash), but the HTML5 player wouldn't start playing right away (or "stream"), it would wait for the 50Mb file to be fully loaded before playing, which took too long.
I also just tried to install the player "BAR-UI / Compact UI single Item" from SoundManager2, it looked really good in its design, and would be ideal, but I cannot make it work or find a complete enough tutorial for installing a player with controls, even after trying for two hours - either the file doesn't play but the player shows up (although without song names displaying), or the song plays immediately in the browser, but the controls don't show. It's hard to troubleshoot SoundManager2 considering there are 4000 lines just in the CSS in their code, and I've found very few explanations to install SoundManager's Bar-UI and its very confusing files.
WikiAudio has a great page about SoundManager, but it doesn't go into installing and displaying controls.
Other options I've looked at (jPlayer) were either extremely complex for what I'm trying to do (it's just a simple mp3 file playing as it loads on a website!), or were flash-based...
To make the BAR-UI work in your webpage you must insert the HTML fragment. It can be customized with different class names (for example full-width for full width plauer):
<div class="sm2-bar-ui compact">
<div class="bd sm2-main-controls">
<div class="sm2-inline-texture"></div>
<div class="sm2-inline-gradient"></div>
<div class="sm2-inline-element sm2-button-element">
<div class="sm2-button-bd">
Play / pause
</div>
</div>
<div class="sm2-inline-element sm2-inline-status">
<div class="sm2-playlist">
<div class="sm2-playlist-target">
</div>
</div>
<div class="sm2-progress">
<div class="sm2-row">
<div class="sm2-inline-time">0:00</div>
<div class="sm2-progress-bd">
<div class="sm2-progress-track">
<div class="sm2-progress-bar"></div>
<div class="sm2-progress-ball"><div class="icon-overlay"></div></div>
</div>
</div>
<div class="sm2-inline-duration">0:00</div>
</div>
</div>
</div>
<div class="sm2-inline-element sm2-button-element sm2-volume">
<div class="sm2-button-bd">
<span class="sm2-inline-button sm2-volume-control volume-shade"></span>
volume
</div>
</div>
</div>
<div class="bd sm2-playlist-drawer sm2-element">
<div class="sm2-inline-texture">
<div class="sm2-box-shadow"></div>
</div>
<div class="sm2-playlist-wrapper">
<ul class="sm2-playlist-bd">
<li><b>SonReal</b> - I Tried</li>
</ul>
</div>
</div>
</div>
Then you have to load the resources for the player:
The JavaScript file that detects the previous HTML fragment and convert it to a player: bar-ui.js
The CSS file to style the player: bar-ui.css
All these files are in the "demo" folder of the downloadable SoundManager 2: download
would Amazing Audio Player meet your needs? http://amazingaudioplayer.com/ they supply the js with some straightforward customization, and you can finetune the css for your needs.
I've used it successfully with 320kbs files, 12 minutes long.
Related
So I'm making a web app to run a small CTF that I will be hosting within my school, and I have developed a webpage that will load up the problems, my example right now lays out the problems in a long row
Here's how that's done:
<body class="main-body">
<div class="body">
<section class="content">
<div class="container-asdf"> <!-- This is a grid, assume that this particular element is repeated several times with changes -->
<div class="item-a">Test Problem</div>
<div class="item-b">Category: Test, Problem</div>
<div class="item-c"><button data-toggle="modal" data-target="#exampleModal" type="button" class="btn btn-info">Button</button></div>
</div>
</section>
</div>
</body>
(Full disclosure that this HTML is likely pretty bad, just working with what I know)
the div with class "container-asdf" is automatically generated for the amount of problems, assume it works perfectly and it generates say 50 problems, I only want 10 of them to appear on the page at a time and I want to separate them using pagination, without having to make a ton of different HTML pages, how exactly could I do this? I don't need code, just some concepts and guides of how I could. My first thought process was to put it in invisible containers and make it appear as you select different numbers, thus why I asked how to use pagination
In summary: I have a lot of elements(in the same HTML file) appearing on the page at once, I want to limit this and split it into pages without having to make multiple HTML files, I am using Flask/Jinja to generate said HTML file, if that helps.
Thanks for any help!
Not sure if this applies but have you considered using the easyPaginate jQuery plugin for the pagination? An example and setup is available here.
I have an example that contains some elements. When i scroll so fast elements not showing and slowly loaded. Is this bug or any other problem ?
My html structure:
<div class="site-header">
This is site header
</div>
<div class="site-content">
<div class="wrapper">
<div class="item-container">
<div class="wrapper">
<div class="image-container">
</div>
<div class="title">
<span>Hello World</span>
</div>
</div>
</div>
</div>
</div><!-- End of content -->
I created a example. Here is the link. You need to check it with a mobile device.
It's not bug. When you are trying to laod image in browser, for the first time, the browser will cache the image for faster laoding in next time. So for the first time it will take some time. If you want to load it faster try to use small size with good pixel ratio image (i.e compressed) , it will load faster when compared to normal one.
If you want read more about browser caching use this link.
Use Chrome lighthouse to check the static data performance(i.e images), check here.
let me know if this works
I'm using Adapt Learning to create responsive E-Learning courses. I downloaded the course code (HTML5, less, CSS, JavaScript) and wrapped it into a mobile application by using PhoneGap Build (cli 6.5.0). Now I want to open the attached PDF-Files. The code is generated and I don't want to change it cause its more efficiency for upcoming projects. I have already created my config.xml in which I tried this:
<feature name="http://api.phonegap.com/1.0/file"/>
Generated Code:
<button class="base resources-item-open drawer-item-open" data-href="course/en/assets/bec3d79837937eab7f5937b3beb9d66bb0b89943.PDF" tabindex="0" role="button" aria-label="Documents. . Training Solutions. ">
<div class="drawer-item-title">
<div class="drawer-item-title-inner h5">Training Solutions</div>
</div>
<div class="drawer-item-description">
<div class="drawer-item-description-inner"></div>
</div>
</button>
I need a solution which works for both iOS and Android.
I think you will get a faster answer here: https://community.adaptlearning.org/mod/forum/view.php?id=4
Hello I'm new to web design,
I used twitters bootstrap to create a website. Everytime I try to load http://www.taekwondo.uwcs.co.uk/gallery.php on mobile (ios) the browser crashes (chrome) or runs very slowly on that page.
I was wondering how could I fix this issue (how to debug it). Do I have too many images on the page? Do I need to lower the quality of the images?
I'm using lazy loading the images using this plugin (http://www.appelsiini.net/projects/lazyload). Here is the html I have there are about 8 rows of images.
<div class="row">
<div class="col-md-3">
<img class="img-responsive " src="images/load.gif" data-original="images/gallery/freshers/29.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive " src="images/load.gif" data-original="images/gallery/freshers/30.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive " src="images/load.gif" data-original="images/gallery/freshers/31.jpg" alt="">
</div>
</div> <!-- End of row -->
jQuery on the page
$(".img-responsive").lazyload();
Thanks in advance
The problem is that you load all the images at once because they are all in the viewport of the user if he opens the page. You should only load images which are currently visible for the user.
For that you can add a min-height (this is not the best solution for responsive websites) to your rows (e.g. min-height: 50px). A better solution is to load the first and maybe second row without lazy loading. The rest of the rows can be lazy loaded. Then the performance problem should be solved ;)
The second thing is, that I wouldn't use a jQuery plugin, because for a such tiny functionality like lazy loading you don't need such a big library which costs performance too.
I prefer a lightweight and more efficient plugin like justlazy. In the example you can see, that images are only loaded, if they are visible for the user. If you load your site, all images are loaded.
You can use justlazy as follows:
1. Define a placeholder:
<span data-src="path/to/image" data-alt="some alt text"
class="justlazy-placeholder">
</span>
Good at this solution is also that google don't index your load-gifs. If you want to seo optimize it, you can use an img with a small image as src-attribute instead of the span for the placeholder.
2. Register lazy loading via javascript
Justlazy.registerLazyLoadByClass("css-class");
I was wondering if it is possible to create a flash movie that rotates values that are stored in HTML. For example if i have these 3 containers:
<div style="display:none">
<img src="someimage1" />
<span class="text1">text1</span>
<span class="text2">text2</span>
</div>
<div style="display:none">
<img src="someimage2" />
<span class="text1">text1</span>
<span class="text2">text2</span>
</div>
<div style="display:none">
<img src="someimage3" />
<span class="text1">text1</span>
<span class="text2">text2</span>
</div>
I want to have some flash movie rotate these values every 10 seconds. I don't want to program it hard into flash, it has to be variable. It has to display the first set, then after 10 sec the second, and so on.
Maybe if it is possible something that stops the toggle, and skip to just the second, or just the third.
I also don't want to use javascript to do this (jQuery etc.), because this conflicts with another timer on the website.
Is there a way of doing this?
If someone could help me get a good resource for this i would be glad, as i have no knowledge of flash, and i have searched the net but just can't find what i am looking for.
Thank you guy!
Look up how to use ExternalInterface. You can call any Javascript you like from Flash/Flex, and you can call any exposed method in your movie from the browser.
Flash finds HTML tough, and your use of element class attributes make me suspect that you might find that Flash would find this kind of rendering tricky. In my most generous moments, I would say that CSS support in Flash is basic and buggy.