So I'm trying out Elm and WebRTC together. However for WebRTC I need some interop to javascript. So I created an index.html with the needed script includes, for both WebRTC and main.js.
However, I am using elm-reactor. Which is super nice. But there is no main.js. I can create it with elm-make, but then I would have to manually update it.
So, is there a way to have elm-reactor work together with embedded elm?
Note: I'm using Elm 0.18, latest as of writing.
You might want to look at elm-live.
It has the same options that elm-reactor has, but you can use your own index.html.
As of today(0.18.0), officially you can not use elm-reactor for embedding your application into custom HTML. It is also impossible to have port subscriptions with elm-reactor without additional setup.
Consider using something like Create Elm App or alternatives.
If you're willing to hack a bit, it's perfectly possible to use your own index.html with elm reactor. Just put the following in an index.html file and open it in reactor (e.g. http://localhost:8000/src/index.html):
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="styles.css"><!-- Put your styles in folder with index.html -->
</head>
<body>
<div style="width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #9A9A9A; font-family: 'Source Sans Pro';">
<div style="font-size: 3em;">Building your project!</div>
<img src="/_reactor/waiting.gif">
<div style="font-size: 1em">With new projects, I need a bunch of extra time to download packages.</div>
</div>
</body>
<!-- Fonts and external JS and styles are available, I've put Ace for example -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.4/ace.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.4/theme-chrome.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.4/worker-lua.js"></script>
<!-- Put the name of your app here (my sources place in `src` forder) -->
<script type="text/javascript" src="/_compile/src/YourApp.elm"></script>
<!-- Removes splash and starts elm app. -->
<script type="text/javascript">
while (document.body.firstChild) {
document.body.removeChild(document.body.firstChild);
}
runElmProgram();
</script>
</html>
If you want to use ports or flags, use the following example (you need Elm.App.fullscreen(flags) etc to use ports, but runElmProgram() to show errors):
<!doctype html>
<meta charset=utf-8>
<title>a title</title>
<link href=/bundle.css rel=stylesheet>
<body></body>
<script src="/_compile/Main.elm"></script> <!-- this will fail in production -->
<script src="/elm-bundle.js"></script> <!-- this will fail in development -->
<script>
var app
var flags = {}
try {
app = Elm.App.fullscreen(flags)
/* app.ports is now available */
} catch (e) {
// this will run in case there are compile errors:
var stylesheets = document.querySelectorAll('link')
for (var i = 0; i < stylesheets.length; i++) {
stylesheets[i].parentNode.removeChild(stylesheets[i])
}
runElmProgram()
}
</script>
Related
im currently digging through the github page, but Im unable to figure out how to set the tabSize property on my prism editor, if anyone has any experience and is willing to share it I would greatly appreciate it!
I will answer here as I placed in code snippet for you to play with.
There is a problem on the umd script where it cannot recognise tabSize as a valid props.
Therefore, you can use tab-size to overcome this.
P.S. move tab size to be part of vue data to avoid complaining the type.
Here is the code snippet for you to test it.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://unpkg.com/vue-prism-editor/dist/prismeditor.min.css" />
<link rel="stylesheet" href="https://unpkg.com/prismjs/themes/prism-tomorrow.css" />
<style>
.height-200 {
height: 200px
}
.my-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
background: #2d2d2d;
color: #ccc;
/* you must provide font-family font-size line-height. Example:*/
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional class for removing the outline */
.prism-editor__textarea:focus {
outline: none;
}
</style>
</head>
<body>
<div id="app">
<prism-editor class="my-editor height-200" v-model="code" :highlight="highlighter" line-numbers :tab-size="tabSize">
</prism-editor>
</div>
<script src="https://unpkg.com/vue#2.6.*"></script>
<script src="https://unpkg.com/vue-prism-editor"></script>
<script src="https://unpkg.com/prismjs/prism.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
<!-- <script src="./src/index.js"></script> -->
<script>
new Vue({
el: "#app",
data: () => ({
code: "code",
tabSize: 8
}),
methods: {
highlighter(code) {
// js highlight example
return Prism.highlight(code, Prism.languages.js, "js");
}
}
});
</script>
</body>
</html>
Currently I'm making vuejs SPA, and the build size is pretty big, so I want to place some loading indicator instead of blank page while vue is downloading its assets.
I've found out that in this case, the solution is v-cloak, but what I dont understand is, in every example the v-cloak is putted inside index.html, whereas in my project src there are no index.html, there is only main.js and vue.app.
there are index.html, but is located inside public folder(which i think its a build file?).
nevertheless, I've tried to put v-cloak directive inside Vue.app, and its still showing blank page while vue downloading its assets. please point me in the right direction.
thanks for all the help.
here's my App.vue:
<template>
<div id="app">
<div v-cloak>
<div class="v-cloak--inline"> <!-- Parts that will be visible before compiled your HTML -->
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
<div class="v-cloak--hidden"> <!-- Parts that will be visible After compiled your HTML -->
<!-- Rest of the contents -->
<router-view />
</div>
</div>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
[v-cloak] .v-cloak--block {
display: block;
}
[v-cloak] .v-cloak--inline {
display: inline;
}
[v-cloak] .v-cloak--inlineBlock {
display: inline-block;
}
[v-cloak] .v-cloak--hidden {
display: none;
}
[v-cloak] .v-cloak--invisible {
visibility: hidden;
}
.v-cloak--block,
.v-cloak--inline,
.v-cloak--inlineBlock {
display: none;
}
</style>
and when I put some loading indicator in public/index.html, it work, but how do I remove it after vue finished loading?
heres my public/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
Loading
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
v-cloak is supposed to be used on the application's mounting point (the el specified in new Vue()), not within a component. Vue does not process v-cloak anywhere else but the mounting point, so it has no effect in App.vue.
To use v-cloak:
In public/index.html, add the v-cloak attribute to div#app, and a <style> block to hide it:
<div id="app" v-cloak></div>
<style>
[v-cloak] {
display: none;
}
</style>
Adjacent to div#app, add a loading icon, and style it so that it's hidden when the v-cloak attribute is removed (i.e., :not([v-cloak])):
<div class="loading">
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
<style>
.loading {
display: grid;
place-content: center;
}
#app:not([v-cloak]) ~ .loading {
display: none;
}
</style>
demo
I installed this code on a single page PHP page and it works the way I want it to. Problem is page I need to install it on is broken up into 4 PHP pages.(Home.php, which also includes, Header, Menu, and Footer PHP pages...) and I can't get the code to work. I've tried installing it different places but no luck... if anyone can help would be much appreciated... Code is below.
page to install on is: http://tonysatthejhouse.com THANKS!!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
<link rel="stylesheet" href="http://tonysatthejhouse.com/superadmin/assets/css/Mag3.css" />
</head>
<body>
<h1>THIS IS A TEST</h1>
<script data-require="jquery#1.9.1" data-semver="1.9.1" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<script src="http://tonysatthejhouse.com/superadmin/assets/js/MagJS4.js"></script>
</body>
</html>
$(document).ready(function() {
$.magnificPopup.open({
items: {
src: 'http://tonysatthejhouse.com/superadmin/assets/extraimages/Restaurant_Week AD-01.jpg', // can be a HTML string, jQuery object, or CSS selector
type: 'image'
}
});
})
.white-popup {
width:500px;
height:700px;
overflow:auto;
padding:10px;
background:white;
border:2px solid black;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
I asked a question about getting box-shadow to work on IE here.
It turns out, though, that IE is not really the problem -- IE can produce a shadow, as seen here:
The screamshot above is from a Meteor app running on localhost; However, when I try to accomplish the shadow effect in a Sharepoint site (on a Content Editor Web Part on a page), I get no box shadow:
The CSS for the working (Meteor) is:
#imgPostTravelTop:hover,
#imgPostTravelTopRight:hover,
#imgPostTravelCenter:hover,
#imgPostTravelBottom:hover {
z-index: 4;
-moz-box-shadow: 0 0 7px #000;
-webkit-box-shadow: 0 0 7px #000;
box-shadow: 0 0 7px #000;
border: 1px solid gold;
}
So, again, the shadowing can work fine in IE without any IE-specific directive!
The CSS for the non-working (Sharepoint Content Editor Web Part) is:
.finaff-form-help-post-travel-centerimage:hover,
.finaff-form-help-post-travel-bottomimage:hover {
z-index: 4;
-moz-box-shadow: inset 0 0 7px #000;
-webkit-box-shadow: inset 0 0 7px #000;
box-shadow: inset 0 0 7px #000;
border: 1px solid red;
}
Note: I swear on a stack of msdn magazines that I checked the IE version not long ago, and it was IE8, but I went to verify that and it is actually IE11! But still, even in this relatively new version of IE11, the box-shadowing is failing!
An earlier suggestion I got was to try this:
zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5,
Color=#ff0000);
...but that doesn't do anything.
I've also tried:
-ms-filter: "progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000)";
And finally, an answer at my earlier question (linked to above) suggested:
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=0,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=45,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=90,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=180,strength=10),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=225,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=270,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=315,strength=2);
But none of this works; why does the shadow work on IE for the locally running Meteor app, but not for the Sharepoint Server-provisioned Content Editor Web Part? They are both running on the same instance of an "InPrivate" IE session.
One possibility I found in James Johnson's answer here indicates that perhaps this line in my markup:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
...is the problem. But I do not add that line explicitly, and don't know where it comes from or, if I did know where it comes from in the codebase, and I were to delete it, what havoc it might wreak elsewhere on the Sharepoint site.
For the record, the "View Source" from the working Meteor app is a profundly different, and contains no "meta" tag. It is a "different animal" altogether; here it is in its entirety, for the curious:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/merged-stylesheets.css?abd8fa0f9109090b6dfb04ae018ba1e7a90a608e">
<script type="text/javascript">__meteor_runtime_config__ = JSON.parse(decodeURIComponent("%7B%22meteorRelease%22%3A%22METEOR%401.2.0.2%22%2C%22PUBLIC_SETTINGS%22%3A%7B%7D%2C%22ROOT_URL%22%3A%22http%3A%2F%2Flocalhost%3A3000%2F%22%2C%22ROOT_URL_PATH_PREFIX%22%3A%22%22%2C%22appId%22%3A%22wc8xy4j0rurw1r0c6ol%22%2C%22autoupdateVersion%22%3A%22fbf092224f885decf98544f617c037c838bed042%22%2C%22autoupdateVersionRefreshable%22%3A%22d906b78beb8cf4410c06763a9c8286ea8465b975%22%2C%22autoupdateVersionCordova%22%3A%22none%22%7D"));</script>
<script type="text/javascript" src="/packages/underscore.js?fa590de5090ceb4a42555b48562fd8f8e7035758"></script>
<script type="text/javascript" src="/packages/meteor.js?9730f4ff059088b3f7f14c0672d155218a1802d4"></script>
<script type="text/javascript" src="/packages/autopublish.js?c5edcae57ad2cf69f735706476fb86d91c1f1b0e"></script>
<script type="text/javascript" src="/packages/insecure.js?e7411f6cee07c76688e26c3b20767e857b42ad9f"></script>
<script type="text/javascript" src="/packages/jquery.js?bd30605bc9f8429d01bae2d29081902d10a6c400"></script>
<script type="text/javascript" src="/packages/linto_jquery-ui.js?6871fa19c8686253b1f7e0f12dab875122097a7d"></script>
<script type="text/javascript" src="/packages/standard-minifiers.js?b02a7937678c6058031ee7b2f45b5a617518335d"></script>
<script type="text/javascript" src="/packages/meteor-base.js?f0836ed3757e6217fff6e2710a1293407a6d9b09"></script>
<script type="text/javascript" src="/packages/mobile-experience.js?674f55574f9947b91bb5f92f9ea9be098479b649"></script>
<script type="text/javascript" src="/packages/random.js?d48c6af563fc182146464d0e3935bf1385aafe1e"></script>
<script type="text/javascript" src="/packages/base64.js?52d94e9ee54ea51e35e9d410040454b9d9f9136a"></script>
<script type="text/javascript" src="/packages/ejson.js?6b2a6aad82b5a8eb6d5f26975783b243b6df124a"></script>
<script type="text/javascript" src="/packages/id-map.js?7ca7d36e6fea2952e28bf48090ce1c5c110df912"></script>
<script type="text/javascript" src="/packages/ordered-dict.js?2628d5d93b3386b11f2d072e1d70ea9644a0652a"></script>
<script type="text/javascript" src="/packages/tracker.js?7776276660c988c38fed448d8262b925dffb5bc3"></script>
<script type="text/javascript" src="/packages/mongo-id.js?86be8beb10a566185e04cb56b189a091ab8773c6"></script>
<script type="text/javascript" src="/packages/diff-sequence.js?693d4e99cb4a8884bd58c0da70e580fcf7fec2f0"></script>
<script type="text/javascript" src="/packages/geojson-utils.js?83d13d8f6fd1847ed97e71e73e2f55dc9165dadf"></script>
<script type="text/javascript" src="/packages/minimongo.js?cdf1a26cf7719fa9471a8017c3defd5aea812727"></script>
<script type="text/javascript" src="/packages/check.js?fc9c23a3200accbea4c234c45664bd38c4ae2713"></script>
<script type="text/javascript" src="/packages/retry.js?cf00021132d94e73a330886b24df2373a3b209ab"></script>
<script type="text/javascript" src="/packages/ddp-common.js?23a845a08ff48730e7fbbbe941df509caa6b9b66"></script>
<script type="text/javascript" src="/packages/reload.js?4afcce286a1d3526c99dff17696bd42e70150db1"></script>
<script type="text/javascript" src="/packages/ddp-client.js?82da06d8e1ea6342d823b2c5c3be071e96108c70"></script>
<script type="text/javascript" src="/packages/ddp.js?1c935134013739ed5ece46880dea800b6319bd67"></script>
<script type="text/javascript" src="/packages/ddp-server.js?1057b33d71942bc01fd0167e2b2a5f49f5545d11"></script>
<script type="text/javascript" src="/packages/mongo.js?5dcfbae63393ea63b330ea0c46d7b41eb1b4c3ae"></script>
<script type="text/javascript" src="/packages/blaze-html-templates.js?31453f3129c01ec6fabaa5b791f6572e8c4464a2"></script>
<script type="text/javascript" src="/packages/reactive-dict.js?e43655c138a9184c40228ef4dd2da3f65f1bd8bb"></script>
<script type="text/javascript" src="/packages/session.js?0ae88e5e9f7b50b0047ade23a47a1a8dfa5874b9"></script>
<script type="text/javascript" src="/packages/logging.js?79dea15e9da438bd107b9ff92162c1b189d70e4b"></script>
<script type="text/javascript" src="/packages/deps.js?a0f1fc18309813a3aac8954f76d0c73e4c5d46f4"></script>
<script type="text/javascript" src="/packages/htmljs.js?02fcaaa6a72c008a5f618f8ec940eac2d240fc2c"></script>
<script type="text/javascript" src="/packages/observe-sequence.js?e0b5ec6321580efa20bf31f5a1ae4c52f05f38b5"></script>
<script type="text/javascript" src="/packages/reactive-var.js?b77e26d789bc6e0859202f67ea0934d68346450a"></script>
<script type="text/javascript" src="/packages/blaze.js?695c7798b7f4eebed3f8ce0cbb17c21748ff8ba8"></script>
<script type="text/javascript" src="/packages/spacebars.js?3eafdd2d5d5d8f08431aa842df4b5e8142600b17"></script>
<script type="text/javascript" src="/packages/webapp.js?ba2db8eb3207813c575b828e42663552e89d359e"></script>
<script type="text/javascript" src="/packages/livedata.js?93f27626c1702ea8af804d6170ffbf8968626718"></script>
<script type="text/javascript" src="/packages/hot-code-push.js?3916ae26c3ca4928e61dc2da7e7b3f93e4164c0c"></script>
<script type="text/javascript" src="/packages/templating.js?142b64439619ddabba8ad16a798ed8349de73bae"></script>
<script type="text/javascript" src="/packages/launch-screen.js?b50bb1bd905d2cc3d6182ee28c096df0cc24a725"></script>
<script type="text/javascript" src="/packages/ui.js?6aa94fb4743be2472f799f928674607edae2afdf"></script>
<script type="text/javascript" src="/packages/autoupdate.js?aba61f60d98ac77989b7b8984bb8495824c0dad7"></script>
<script type="text/javascript" src="/packages/global-imports.js?a379a2c4e2479aebed57fef92a7f3df1f6843cf5"></script>
<script type="text/javascript" src="/app/template.formhelp.js?b781feeb046b65b092be70ca04fb6d6fe3c9c114"></script>
<script type="text/javascript" src="/app/formhelp.js?82951332599f48810cba5422fff5616aaf8a201f"></script>
<title>Travel Form Help</title>
</head>
<body>
</body>
</html>
UPDATE
I wonder if, because this seems to be a Sharepoint HTML problem, I will have to revert to trying to work around it via jQuery, such as in a "hover" event handler toggler (mouseenter, mouseleave). I was originally going down that path, but switched to the more elegant CSS-only approach. Things like IE - the bane of web developers' workhours existence) make elegance more difficult to attain.
SharePoint 2010 tells Internet Explorer to run in compatibility mode in order to retain functionality associated with its various ActiveX controls and Office extensions. Compatibility mode is essentially equivalent to IE8 in terms of HTML, CSS, and ECMAscript compliance.
If you wanted to, you could sneak <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> between the <head></head> tags in the masterpage that SharePoint uses (with no preceding elements that aren't also <meta> tags) to tell IE11 to actually behave like IE11, but that could come at a loss of SharePoint functionality.
If you have the Publishing Infrastructure site collection feature and the Publishing site feature activated on your site, it makes it easier to manipulate masterpages and page layouts. You can have multiple masterpages in your SharePoint site's masterpage gallery, giving you the ability to have some pages that render in IE8 mode for legacy functionality and some pages that render in Edge mode for modern HTML/CSS. (I would download a copy of the existing masterpage, add or update the meta header tag, and re-upload it as a new masterpage.)
While the masterpage for the site as a whole is determined by a setting in Site Settings (found at /_layouts/changesitemasterpage.aspx), you can also hardcode a masterpage reference into a page layout. Then you can create a new page using that page layout and it should render as IE11 instead of IE8.
Edit: Or yes, you could instead use jQuery to work around the problem with the CSS not being recognized. Just be aware that if you go this route, you're essentially supporting IE8, so the newest versions of jQuery probably won't work (but the venerable version 1.1 should be fine).
I am trying to integrate iTunes preview url (m4a file) using jplayer but running into issues
None of the files from Apple iTunes work. For example:
http://a1.phobos.apple.com/us/r1000/057/Music/fd/8b/40/mzm.staswrxu.aac.p.m4a
However these 2 m4a (non apple) links work:
http://jwdriggs.com/jagspodcast/m4a/%23116.m4a
They do work in iTunes player themselves.
What can I do to make them work? Does it have anything to do with iTunes encoding. It would be great if there is any workaround for this issue.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<!-- Website Design By: www.happyworm.com -->
<title>Demo : jPlayer circle player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="skin/circle.skin/circle.player.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jquery.transform.js"></script>
<script type="text/javascript" src="js/jquery.grab.js"></script>
<script type="text/javascript" src="js/mod.csstransforms.min.js"></script>
<script type="text/javascript" src="js/circle.player.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
/*
* Instance CirclePlayer inside jQuery doc ready
*
* CirclePlayer(jPlayerSelector, media, options)
* jPlayerSelector: String - The css selector of the jPlayer div.
* media: Object - The media object used in jPlayer("setMedia",media).
* options: Object - The jPlayer options.
*
* Multiple instances must set the cssSelectorAncestor in the jPlayer options. Defaults to "#cp_container_1" in CirclePlayer.
*
* The CirclePlayer uses the default supplied:"m4a, oga" if not given, which is different from the jPlayer default of supplied:"mp3"
* Note that the {wmode:"window"} option is set to ensure playback in Firefox 3.6 with the Flash solution.
* However, the OGA format would be used in this case with the HTML solution.
*/
var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
{
//m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a"
m4a: "http://a1549.phobos.apple.com/us/r1000/026/Music/d8/01/eb/mzm.mxkkesne.aac.p.m4a"
}, {
cssSelectorAncestor: "#cp_container_1",
swfPath: "js",
wmode: "window"
});
});
//]]>
</script>
</head>
<body>
<!-- The jPlayer div must not be hidden. Keep it at the root of the body element to avoid any such problems. -->
<div id="jquery_jplayer_1" class="cp-jplayer"></div>
<!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->
<div id="cp_container_1" class="cp-container">
<div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
<div class="cp-buffer-1"></div>
<div class="cp-buffer-2"></div>
</div>
<div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
<div class="cp-progress-1"></div>
<div class="cp-progress-2"></div>
</div>
<div class="cp-circle-control"></div>
<ul class="cp-controls">
<li>play</li>
<li>pause</li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block -->
</ul>
</div>
</body>
</html>
Try using SoundManager2 - this library works fine for playing iTunes audio previews.