Android WebView允许JavaScript发出声音

Question

大家好，我正在做一个网络应用程序，想在我的资产文件夹中使用它并显示为android应用程序。 到目前为止，这是我所做的：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0073)http://www.elaich.technion.ac.il/e-learn-new/uploads/interactive/topic-1/ -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>A jQuery Drag-and-Drop Number Cards Game</title>
<link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 600px)" href="css/style_small.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 601px)" href="css/style_medium.css">
<link rel="stylesheet" type="text/css" href="css/ui.css">
<script src="js/jquery.mobile-1.0.min.js"></script>

<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>


<script type="text/javascript">


var curNum = 1;
var numScreens = 5;
var correctCards = 0;
$(document).ready(function() { 
  $( init );
});


function nextButton() {
    if(curNum<numScreens) {
      curNum = parseInt(curNum)+1;
      document.location.href = '#'+curNum;
      document.location.reload();
      $( init );
    }
}

function previousButton() {
    document.location.href = '#1';
    document.location.reload();
    /*if(curNum>1) {
      curNum = parseInt(curNum)-1;
      document.location.href = '#'+curNum;
      $( init );
    }*/
}

function nextStageButton() {

    document.location.href = 'stage_2.html';

}

function init() {

    if(window.location.hash!='') {
        anchorArr = window.location.hash;
        anchorArr = anchorArr.split('#');
        curNum = anchorArr[1];
    } 

  // Hide the success message
  $('#successMessage').hide();
  $('#timer').show();

  // Reset the game
  correctCards = 0;
  $('#cardPile').html( '' );
  $('#cardSlots').html( '' );

  // Create the pile of shuffled cards
  var numbers1 = [ 1, 2, 3, 4, 5, 6 ];
  var words1 = [ 'Circle', 'Pentagon', 'Diamond' ];

  var numbers2 = [ 4, 5, 6, 7, 8, 9 ];
  var words2 = [ 'Rectangle', 'Trapezoid', 'Square' ];

  var numbers3 = [ 7, 8, 9, 10, 11, 12 ];
  var words3 = [ 'Star', 'Triangle', 'Hexagon' ];

  var numbers4 = [ 10, 11, 12, 13, 14, 15 ];
  var words4 = [ 'Ellipse', 'Heart', 'Check' ];

  var numbers5 = [ 13, 14, 15, 1, 2, 3 ];
  var words5 = [ 'Question Mark', 'Exclamation Point', 'Octagon' ];

  var images = ['background-1.png', 'background-2.png', 'background-3.png', 'background-4.png', 'background-5.png'];

  $('#content').css({'background-image': 'url(img/' + images[Math.floor(Math.random() * images.length)] + ')'});

  //var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 ];
  //numbers.sort( function() { return Math.random() - .5 } );

  curNumbers = eval("numbers"+curNum);
  startFrom = curNumbers[0]; 
  curNumbers.sort( function() { return Math.random() - .5 } );
  curWords = eval("words"+curNum);
  //curWords.sort( function() { return Math.random() - .5 } );

  for ( var i=0; i<curNumbers.length; i++ ) {
    $('<div><img src="img/pic-' + curNumbers[i] + '.png" border="0" alt="" /></div>').data( 'number', curNumbers[i] ).attr( 'id', 'card'+curNumbers[i] ).appendTo( '#cardPile' ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
    } );
  }

  // Create the card slots
  var words = [ 'Circle', 'Pentagon', 'Diamond', 'Rectangle', 'Trapezoid', 'Square', 'Star', 'Triangle', 'Hexagon', 'Ellipse', 'Heart', 'Check', 'Question Mark', 'Exclamation Point', 'Octagon' ];
  for ( var i=startFrom; i<=(startFrom+curWords.length-1); i++ ) {
    $('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );
  }

  var numsText = sActive = ''; 
  for ( var i=1; i<=numScreens; i++ ) {
    sActive = (i==curNum) ? ' class="currentNum"' : '';
    numsText += '<span'+sActive+'>'+ i +'</span>'; 
  }
  $("#nums").html(numsText);

}

function handleCardDrop( event, ui ) {
  var slotNumber = $(this).data( 'number' );
  var cardNumber = ui.draggable.data( 'number' );

  // If the card was dropped to the correct slot,
  // change the card colour, position it directly
  // on top of the slot, and prevent it being dragged
  // again

  if ( slotNumber == cardNumber ) {
    //ui.draggable.addClass( 'correct' );
    var sound = new Audio('sounds/correct_answer.mp3');
    sound.play();
    ui.draggable.draggable( 'disable' );
    ui.draggable.css( 'background-color','#ccc' );
    $(this).droppable( 'disable' );
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );

    correctCards++;
  } 
  else
  {
    var sound = new Audio('sounds/doing_it_wrong.mp3');
    sound.play();
  }

  if ( correctCards == 3 ) {

    var sound = new Audio('sounds/yehey.mp3');
    sound.play();
    clearInterval(counter);
    var buttonText = 'Go to Next Round';
    var goLeft = $(window).width(); 
    var goTop = $(window).height();
    goLeft = (goLeft-400)/2;
    goTop = (goTop-300)/2;
    goLeft = goLeft+'px';
    goTop = goTop+'px';
    $('#successMessage').show();
    $('#successText').text("Round "+curNum+" done!");
    if(curNum==numScreens) { 
        $('#nextButton').text("Go to Next Stage");
        buttonText = "Go to Next Stage";
        $('#nextButton').click(function() {
              nextStageButton();
        });
        $("#timer").click(function(){
        $("p").hide();
        $("#timeExpired").hide()
});
    } else {
        $('#nextButton').click(function() {
              nextButton();
        });
    }
    $('#successMessage').animate( {

      width: '400px',
      height: '150px',
      opacity: 1
    }, 400 );


var score1 = correctCards * count;

  }
}

  var count=11;

  var counter=setInterval(timer, 1000); //1000 will  run it every 1 second

function timer()
{

  count=count-1;
  if (count <= -1)
  {
     clearInterval(counter);

  }

  document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling

  if (correctCards == 3)
  {
    clearInterval(counter);
    $("*").draggable( 'disable' );
    $("#timeExpired").hide();
  }

  if (count <= 0)
  {
    $("*").draggable( 'disable' );
    $("*").droppable( 'disable' );
    clearInterval(counter);
    $('#timeExpired').show();
    $('#successText').text("You did not make it.");
     $('#nextButtonte').text("Start Over");
        buttonText = "Start Over";
        $('#nextButtonte').click(function() {
              previousButton();
        });

    ui.draggable.draggable( 'disable' );

    correctCards++;
    } 
    $('#timeExpired').animate( {
      left: goLeft,
      top: goTop,
      width: '400px',
      height: '150px',
      opacity: 1
    }, 400 );

}

</script>

</head>
<body background="img/background-1.png">

<div data-role="page" id="home" data-add-back-btn="true">
<div id="header">Shape</div>


<div id="content" data-role="content">
<div id="timer"></div>
  <div id="nav">Round: &nbsp;

    <span id="nums"><span class="currentNum">1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
    </span>

  </div>

  <div id="cardPile">
    <div id="card4" class="ui-draggable" style="position: relative;"><img src="img/pic-4.png" border="0" alt=""></div>
    <div id="card1" class="ui-draggable" style="position: relative;"><img src="img/pic-1.png" border="0" alt=""></div>
    <div id="card5" class="ui-draggable" style="position: relative;"><img src="img/pic-5.png" border="0" alt=""></div>
    <div id="card3" class="ui-draggable" style="position: relative;"><img src="img/pic-3.png" border="0" alt=""></div>
    <div id="card6" class="ui-draggable" style="position: relative;"><img src="img/pic-6.png" border="0" alt=""></div>
    <div id="card2" class="ui-draggable" style="position: relative;"><img src="img/pic-2.png" border="0" alt=""></div>

  </div>

  <div id="cardSlots">
    <div class="ui-droppable" id="slot1">Circle</div>
    <div class="ui-droppable" id="slot2">Pentagon</div>
    <div class="ui-droppable" id="slot3">Diamonds</div>
  </div>

  <div id="successMessage">
    <h2 id="successTitle">You did it!</h2>
    <h4 id="successText"></h4>
    <button id="nextButton" class="myButton" type="submit">Go to Next Round</button> 
  </div>

  <div id="timeExpired" style="display: none;">
    <h2 id="successTitle">You did not make it!</h2>
    <h4 id="successText"></h4>
    <button id="nextButtonte" class="myButton">Start Over</button> 
  </div>

</div>




</body></html>

这是一个拖放游戏，因此，基本上，如果用户将不正确的项目放置到放置目标上，它将为错误的放置创建声音，而其他人则播放正确的声音。 但是我听不到声音，logcat说：

 03-14 01:52:41.672: E/MediaPlayer(448): error (1, -2147483648)

我不知道为什么它不播放。 当我在桌面上对其进行测试时，它可以正常工作，但在Android中则不能。 有任何想法吗？ 非常感谢您的帮助。 谢谢。

Answer 1

我没有深入研究所有代码的猜测是，您没有在移动设备通常需要的用户事件内部启动音频。 我正在研究的SoundJS已经做了一些工作来简化此工作。 “ 移动安全教程”包含一些可能有用的信息。

希望能有所帮助。