View Full Version : Audio tag not displaying on Chrome

15 Jun 2011, 7:04 AM
Sencha Touch version tested:


only default sencha-touch.css

Platform tested against:

chromium browser, 11.0.696.71 (86024) Ubuntu 10.10


When creating an Audio component with enableControls: true, the audio plays but doesn't display

Test Case:

<link rel="stylesheet" type="text/css" href="resources/css/sencha-touch.css" />
<script type="text/javascript" src="sencha-touch-debug.js"></script>
<script type="text/javascript">

onReady: function() {
new Ext.Panel({
fullscreen: true,
items: [{
xtype: 'audio',
url: 'audio.ogg',
enableControls: true

Steps to reproduce the problem:

create a panel with an item xtype: audio and enableControls
watch the result

The result that was expected:

an audio tag should display

The result that occurs instead:

even with enableControls: true, nothing is visible

Debugging already done:

it seems that if the audio dom has the attribute "hidden" set to "true" or "false", the tag is hidden

Possible fix:

not really a fix, but if enableControls is set, we can not define the hidden attribute

Ext.Audio = Ext.extend(Ext.Media, {


getConfiguration: function(){
var hidden = !this.enableControls;
// create an object with hidden: true if we want to hide the tag
// or create an empty object if we want to see it
var obj = hidden ? {hidden: true} : {};
if (!Ext.supports.AudioTag) {
return Ext.apply(obj, { // apply obj with configuration
tag: 'embed',
type: 'audio/mpeg',
target: 'myself',
controls: 'true'
} else {
return Ext.apply(obj, { // apply obj with configuration
tag: 'audio'



2 Aug 2011, 1:59 PM
I wanted to chime in and say that this is indeed a bug with no existing workaround unless you can manually override the "hidden" attribute. In Chrome, the presence of the hidden attribute makes it hidden, regardless of whether or not it is set to true or false.

6 Oct 2011, 3:00 AM
The following css-Tag shows me the audioplayer in chrome.

display : block;