HTML5: Playing Audio - django

I would like to play an audio in my Django app.. I am trying to include the audio but it doesn't seem to play..
I tried two things..
1)
<audio id="BillaTheme" autoplay>
<source src="../media/audio/Billa2Theme.mp3"/>
</audio>
2)
MEDIA_URL = '/Users/Projects/beer/ThirdProject/media/'
<audio id="BillaTheme" autoplay>
<source src="{{MEDIA_URL}}audio/Billa2Theme.mp3"/>
</audio>
Both doesn't seem to work. Need some guidance on this...

Django Application server can't find your audio file. It can't find it on the path: "/Users/Projects/beer/ThirdProject/media/audio/Billa2Theme.mp3". Check the path and the name of file properly. It's case-sensetive - the path and the name of file.
Output your MEDIA_ROOT in a template and make sure that it is exactly you want.
If you use another web server to serve static files then check the access log of the server.

Does your browser support mp3? Take a look at the "Audio Formats and Browser Support" table at w3schools
You could also give a try to the nice & open-source soundmanager2.

Related

Create HIT using wav files

I am a new Requestor, and trying to create a new HIT based on the Audio Naturalness HTML template in https://requester.mturk.com/create/projects/new.
I would like to use wav files, and in the html file provided, I have modified the audio_url line to look like:
<!-- Your audio file URLs will be substituted for the "audio_url" variable when you publish a batch with a CSV input file containing multiple
audio file URLs -->
<source src="${audio_url}" type="audio/wav" />
When I'm going to publish the batch, it asks for a csv, which looks like:
audio_url
https://github.com/user/voiceTTS/blob/master/Sample1a.wav
https://github.com/user/voiceTTS/blob/master/Sample1b.wav
However, when I go to preview the HIT, the audio files are blank, i.e. nothing plays.
Where am I going wrong?
This was actually an issue with hosting audio files on GitHub. I hosted them on my personal website, and it works as expected!

How to put an image from a local drive into a cfdocument file?

This will show me the image in a browser:
<cfset myImage=ImageNew("d:\UploadedDocuments\thumbnails\1487862_page_1.jpg")>
<cfimage source="#myImage#" action="writeToBrowser">
But if I use the same code inside of a .pdf file, it generates a small red x. Is this not possible to do?
If the image is already on the drive you don't need CFIMAGE here. You can embed it like so:
<img src="file:///d:\mysite\images\myimage.jpg" width="50" height="60">
You could also use an HTTP Path to it as well - store it at a location accessible by your web server through real or virtual directories use the <img> tag like you normally would.
This post on cfdocument and SSL and this suplimental post on using the file system with cfdocument should help you sort it out.

How to ensure users only embed SoundCloud iFrame?

I am building a social networking website for musicians and I would like them to be able to enter the embed code provided by SoundCloud, so that they may have a sound clip on their posts.
However, I am unsure how I would sanitise the input, to ensure that it's only a SoundCloud iframe embed code that they enter. I want to avoid them pasting in embed code for say, YouTube or anything else for that matter.
An example embed code from SoundCloud looks like:
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F85146642"></iframe>
I am using the HTML parser, jSoup to sanitise input.
The key fragment to this is the src content:
https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F85146642
One possibility I thought of, was to extract the src parameters value and then rebuild the iframe myself, this way, only storing the URL and ensuring that any HTML output to the browser is that which I have created myself. Doing this may also allow me to run checks on the domain name etc.
I'm wondering what the best approach would be for this?
Appreciate any input you may have.
Thanks,
Michael.
PS - I am using Railo (ColdFusion server) and the Java jSoup library, but I guess the same principles would apply regardless of what language one would use.

cfimage from binary in cfdocument

I am writing a PDF dynamically, and am creating a QR code on the document for eTicketing purposes
i set my cfdocument localurl=yes to include a different image, which works fine, but since I am using an API call to get the binary for the qrCode, the using cfimage to display the image, it is only showing a red X
<cfdocument format="PDF" overwrite="Yes" localUrl="yes" pageType = "letter">
<body>
<cfoutput>
<section id="header">
<img src="file:///#ExpandPath('images/header.png')#"/>
<cfimage action="writeToBrowser" source="#rc.qrCode#" />
</cfoutput>
</body>
</html>
</cfdocument>
the source variable rc.qrCode is a binary response that works perfectly until i place inside cfdocument, it generates a url like this http://mysite/CFFileServlet/_cf_image/_cfimg-7945382145198648283.PNG as image source
i am sure this has todo with localurl and file:///, i just an not knowledgable enough to know why
Do not need to use physical path rather use relative path to your page.
e.g.
If you code in index.cfm of root folder and image inside images folder
try <img src="images/header.png"> , Note that it should not start with root path rather relative to your file.
UPDATE
writetoBrowser internally write file to hard drive to it's temporary location (topically, C:\ColdFusion10\cfusion\tmpCache\CFFileServlet) and while rendering it to browser it use relative path like "/CFFileServlet/_cf_image/_cfimg1592404668342998556.PNG", you can say that ColdFusion internally map CFFileServlet directory with all coldfusion site but notice leading forward slash and this makes issue with localurl=true. Since localurl=true either need physical path or relative path to your document.
Good idea is instead of writetobrowser you can write same image to harddrive at your location and give physical path in img tag. I do not this there will any performance issue since ColdFusion internally doing same thing when you are using writetobrowser attribute :)

Why is my Django app not displaying dynamic images when the path is correct?

My Django 1.1 app uses dynamic images.
I'm confused about why the path generated from my template tag:
{{image_product.photo.path}}
looks correct, but does not display the requested image.
This generates a path that works:
src='/media/{{image_product.photo}}' => <img src='/media/lcdtvs/product1.jpg'>
This DOES NOT work:
src='{{image_product.photo.path}}' => <img src='/Users/Bryan/work/review_app/media/lcdtvs/product1.jpg'>
I checked to confirm that the Absolute path generated from MEDIA_ROOT is correct on my computer and it works fine.
Why would the image not display correctly?
Two things to keep in mind:
What you want is the {{image_field.url}} method (not the path).
If it still is 404, either you need to setup your server correctly, or if you are using the development server you need to enable it to server static files.
Not familiar with Django, but I'd guess you need to have file:///Users/... in the second snippet.