PDA

View Full Version : Audio tag not displaying on Chrome



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

1.1.0

only default sencha-touch.css


Platform tested against:

chromium browser, 11.0.696.71 (86024) Ubuntu 10.10


Description:

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


Test Case:



<html>
<head>
<title>Bug</title>
<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">

Ext.setup({
onReady: function() {
new Ext.Panel({
fullscreen: true,
items: [{
xtype: 'audio',
url: 'audio.ogg',
enableControls: true
}]
});
}
});
</script>
</head>
<body></body>
</html>



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'
});
}
}

...

});

loudin
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.

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



audio[hidden="false"]{
display : block;
}