Non display of HTML5 <audio> tag not working

belliott · ‎12-03-2010

I can't get an audio player to not be displayed by using the CSS style: "display: none:" This works fine in Firefox and Safari but on the Blackberry Torch 9700 mobile browser does not. I think this is a browser refresh bug in the Blackberry implementation of WebKit. Here is sample code:

<html>
<head>
<title>test</title>
<meta content="initial-scale=1.0,user-scalable=no" id="viewport" name="viewport">
<style type="text/css">
span
{
display:block;
}
</style>
<script language="Javascript">

var toggle = true;
function test() {

    if (toggle) {
      mySpan.style.display = 'none';
      toggle = false;
    }
    else {
      mySpan.style.display = 'block';
      toggle = true;
    }

}

</script>

</head>
<body>
<button onClick="test()">Toggle</buttton>
<h2>Nirvana</h2>
<span id="mySpan"><audio class="audio-player" id="myAudio" src="mpthreetest.mp3" controls style="height: 50; width: 300;"></audio>
</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>
</body>
</html>

astanley · ‎07-02-2009

Are you trying to add the audio player to your page, but not display the controls ?

If so then simply remove the "controls" keyword from the <audio> element, like this (you may need to add the 'autoplay' keyword in order for the audio to play:

<audio class="audio-player" id="myAudio" src="mpthreetest.mp3" controls style="height: 50; width: 300;">

Otherwise, if you are just trying to hide the "mySpan" element, I think you need to add the following line to your test() JavaScript method. Are you noticing an exception being raised from within this method?

function test() {
    var mySpan = document.getElementById("mySpan");
    if (toggle) {
      mySpan.style.display = 'none';
      toggle = false;
    }
    else {
      mySpan.style.display = 'block';
      toggle = true;
    }
}

Hope that helps.

Sincerely,

Adam

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.

Watch the BlackBerry Jam Americas Sessions.

belliott · ‎12-03-2010

Thanks but this doesn't work either. I believe this is a refresh bug with the Blackberry WebKit implementation for the <audio> tag. Here is the code with your suggestion:

<html>
<head>
<title>test</title>
<meta content="initial-scale=1.0,user-scalable=no" id="viewport" name="viewport">
<style type="text/css">
span
{
display:block;
}
</style>
<script language="Javascript">

var toggle = true;
function test() {

    var mySpan = document.getElementById("mySpan");
    if (toggle) {
      mySpan.style.display = 'none';
      toggle = false;
    }
    else {
      mySpan.style.display = 'block';
      toggle = true;
    }

}

</script>

</head>
<body>
<button onClick="test()">Toggle</buttton>
<h2>Nirvana</h2>
<span id="mySpan"><audio class="audio-player" id="myAudio" src="mpthreetest.mp3" controls style="height: 50; width: 300;"></audio>
</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>
</body>
</html>

----------------------------

I have a similar problem with trying to change the "src" audio (MP3) with the <audio> tag and I can only play the first set audio file but updates are not taking effect. It seems to be a refresh problem with the audio element. Here is code:

<html>
<head>
<title>Focus Daily Broadcast</title>
<meta content="initial-scale=1.0,user-scalable=no" id="viewport" name="viewport">
<meta content="false" name="x-blackberry-defaultHoverEffect">

<script language="Javascript">

function selectPlayback1() {
document.getElementById("audio-player-hook").innerHTML = '<audio class="audio-player" id="myAudio" src="audio1.mp3" controls style="height: 50; width: 300;"></audio>';
}

function selectPlayback2() {
document.getElementById("audio-player-hook").innerHTML = '<audio class="audio-player" id="myAudio" src="audio2.mp3" controls style="height: 50; width: 300;"></audio>';
}

</script>

</head>
<body>
        <div id="audio-player-hook" class="audio-player-div"></div>
        <div><button class="audio-advanced" onClick="selectPlayback1();">Audio 1</button></div>
        <div><button class="audio-advanced" onClick="selectPlayback2();">Audio 2</button></div>
        <script>

        </script>
</body>
</html>

----

This code works on the iPhone mobile Safari WebKit browser.

belliott · ‎12-03-2010

On another test, I try to remove the audio element:

var audioDiv = document.getElementById('audio-player-hook');
var child = document.getElementById('myAudio');
audioDiv.removeChild(child);

In Safari, this works fine but when I try it on Blackberry Torch, it removes another element in the DOM and not even the audio element! To me, this shows that that the DOM is messed up! Anybody else seen these problems?

prionko · ‎12-28-2010

Hi,

I am also facing the same problem in regards to hiding the audio tag of HTML 5 in blackberry torch 9800.

The code is working fine in Safari, Firefox, Iphone and Ipad. Below I have pasted the sample code for your reference.

Hope to get some quick response .

Thanks,

Saurav

<!DOCTYPE html>

<html lang="en">
<head>
<script type="text/javascript" src="./js/jquery-1.4.4.min.js"></script>
<script>
function closeAudio(){
   //audioPlayer(null);
   //lowlightSong();
   //$('#audioplayer_song_snippet').css('display','none');
   $('#audioplayer_song').remove();
   //if (audioTimeoutId) clearTimeout(audioTimeoutId);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
</head>
<body>


       <a id="audio_close_link" href="javascript&colon;closeAudio()">
               <img src="./img/closebutton.png" height="100px"/>
           </a>

<div id="audioplayer_song_snippet" class = "test">

   <div id="audioplayer_song" class="test2">
       <a href="#" id="click">Click Me</a>
   </div>


</div>

</body>
</html>

<script>
$(document).ready(function() {

    var audio = $('<audio />', {
      id : 'song_snippet_player',
      autoPlay : 'autoplay',
      controls : 'controls'
    });

    addSource(audio, 'audio/Annabelle.mp3');

    $('#click').click(function() {
      audio.appendTo('#audioplayer_song');
      $(this).fadeOut('fast');
      return false;
    });


    function addSource(elem, path) {
      $('<source />').attr('src', path).appendTo(elem);
    };

});
</script>

Cesar_Vanatur · ‎02-17-2010

Hello everyone.

  I am also interested in this thread.

  Any news?.

  In Eclipse, the tag "audio" is not recognized, why?.

Thanks.

pnewhook · ‎01-13-2011

Hey guys, astanley had it right. when you hav a 'controls' attribute in an audio tag, the browser will render it's default controls for the element. If you just want to manipulate the audio files behind the scenes, simply leave controls out. The controls attribute doesn't take parameters, it's presence is all that's required.

@belliott

Your audio element should look like this, note the complete lack of a controls attribute

<audio class="audio-player" id="myAudio" src="mpthreetest.mp3" style="height: 50; width: 300;"></audio>

@prionko

When you dynamically add the audio element, you're telling jQuery to add a controls element. Don't do that.

prionko
  var audio = $('<audio />', {
      id : 'song_snippet_player',
      autoPlay : 'autoplay',
      controls : 'controls' //this shouldn't be here
    });

@Cesar_Vanatur

The audio tag is pretty new most tools don't support it yet. By default, eclipse tries to warn you against unsupported tags, assuming you've made a typo. Some browsers downgrade their render engine (IE) when errors are found on page, so this is useful. Visual Studio doesn't recognize most HTML5 tags yet either.

Welcome!

Web and WebWorks Development

Non display of HTML5 <audio> tag not working

Re: Non display of HTML5 <audio> tag not working

Re: Non display of HTML5 <audio> tag not working

Re: Non display of HTML5 <audio> tag not working

Re: Non display of HTML5 <audio> tag not working

Re: Non display of HTML5 <audio> tag not working

Re: Non display of HTML5 <audio> tag not working