htmlで音声を追加

以下は、「Wheel of Fortune Bingo」を実行するためのHTMLコードです。ホイールが回転しているときにオーディオを追加したい場合、スピンがない場合は音楽が自動的に停止するはずです。これについて助言してください。ここでは以下htmlで音声を追加

HTMLコードは次のとおりです。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Wheel of Fortune Bingo</title> 
    <style type="text/css"> 
    text{ 
     font-family:Helvetica, Arial, sans-serif; 
     font-size:11px; 
     pointer-events:none; 
    } 
    #chart{ 
     position:absolute; 
     width:500px; 
     height:500px; 
     top:0; 
     left:0; 
    } 
    #question{ 
     position: absolute; 
     width:400px; 
     height:500px; 
     top:0; 
     left:520px; 
    } 
    #question h1{ 
     font-size: 50px; 
     font-weight: bold; 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
     position: absolute; 
     padding: 0; 
     margin: 0; 
     top:50%; 
     -webkit-transform:translate(0,-50%); 
       transform:translate(0,-50%); 
    } 
    </style> 

</head> 
<body> 
    <div id="chart"></div> 
    <div id="question"><h1></h1></div> 

    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    <script type="text/javascript" charset="utf-8"> 
     var padding = {top:20, right:40, bottom:0, left:0}, 
      w = 500 - padding.left - padding.right, 
      h = 500 - padding.top - padding.bottom, 
      r = Math.min(w, h)/2, 
      rotation = 0, 
      oldrotation = 0, 
      picked = 100000, 
      oldpick = [], 
      color = d3.scale.category20();//category20c() 
      //randomNumbers = getRandomNumbers(); 

     //http://osric.com/bingo-card-generator/?title=HTML+and+CSS+BINGO!&words=padding%2Cfont-family%2Ccolor%2Cfont-weight%2Cfont-size%2Cbackground-color%2Cnesting%2Cbottom%2Csans-serif%2Cperiod%2Cpound+sign%2C%EF%B9%A4body%EF%B9%A5%2C%EF%B9%A4ul%EF%B9%A5%2C%EF%B9%A4h1%EF%B9%A5%2Cmargin%2C%3C++%3E%2C{+}%2C%EF%B9%A4p%EF%B9%A5%2C%EF%B9%A4!DOCTYPE+html%EF%B9%A5%2C%EF%B9%A4head%EF%B9%A5%2Ccolon%2C%EF%B9%A4style%EF%B9%A5%2C.html%2CHTML%2CCSS%2CJavaScript%2Cborder&freespace=true&freespaceValue=Web+Design+Master&freespaceRandom=false&width=5&height=5&number=35#results 

     var data = [ 
        {"label":"Winner 1", "value":1, "question":"What CSS property is used for specifying the area between the content and its border?"}, // padding 
        {"label":"Winner 2", "value":1, "question":"What CSS property is used for changing the font?"}, //font-family 
        {"label":"Winner 3", "value":1, "question":"What CSS property is used for changing the color of text?"}, //color 
        {"label":"Winner 4", "value":1, "question":"What CSS property is used for changing the boldness of text?"}, //font-weight 
        {"label":"Winner 5", "value":1, "question":"What CSS property is used for changing the size of text?"}, //font-size 
        {"label":"Winner 6", "value":1, "question":"What CSS property is used for changing the background color of a box?"}, //background-color 
        {"label":"Winner 7", "value":1, "question":"Which word is used for specifying an HTML tag that is inside another tag?"}, //nesting 
        {"label":"Winner 8", "value":1, "question":"Which side of the box is the third number in: margin:1px 1px 1px 1px; ?"}, //bottom 
        {"label":"Winner 9", "value":1, "question":"What are the fonts that don't have serifs at the ends of letters called?"}, //sans-serif 
        {"label":"Winner 10", "value":1, "question":"With CSS selectors, what character prefix should one use to specify a class?"}, //period 
        {"label":"Winner 11", "value":1, "question":"With CSS selectors, what character prefix should one use to specify an ID?"}, //pound sign 
        {"label":"Winner 12", "value":1, "question":"In an HTML document, which tag holds all of the content people see?"}, //<body> 
        {"label":"Winner 13", "value":1, "question":"In an HTML document, which tag indicates an unordered list?"}, //<ul> 
        {"label":"Winner 14", "value":1, "question":"In an HTML document, which tag indicates the most important heading of your document?"}, //<h1> 
        {"label":"Winner 15", "value":1, "question":"What CSS property is used for specifying the area outside a box?"}, //margin 
        {"label":"Winner 16", "value":1, "question":"What type of bracket is used for HTML tags?"}, //< > 
        {"label":"Winner 17", "value":1, "question":"What type of bracket is used for CSS rules?"}, // { } 
        {"label":"Winner 18", "value":1, "question":"Which HTML tag is used for specifying a paragraph?"}, //<p> 
        {"label":"Winner 19", "value":1, "question":"What should always be the very first line of code in your HTML?"}, //<!DOCTYPE html> 
        {"label":"Winner 20", "value":1, "question":"What HTML tag holds all of the metadata tags for your page?"}, //<head> 
        {"label":"Winner 21", "value":1, "question":"In CSS, what character separates a property from a value?"}, // colon 
        {"label":"Winner 22", "value":1, "question":"What HTML tag holds all of your CSS code?"}, // <style> 
        {"label":"Winner 23", "value":1, "question":"What file extension should you use for your web pages?"}, // .html 
        {"label":"Winner 24", "value":1, "question":"Which coding language is used for marking up content and structure on a web page?"}, // HTML 
        {"label":"Winner 25", "value":1, "question":"Which coding language is used for specifying the design of a web page?"}, // CSS 
        {"label":"Winner 26", "value":1, "question":"Which coding language is used for adding functionality to a web page?"}, // JavaScript 
        {"label":"Winner 27", "value":1, "question":"What CSS property is used for making the edges of a box visible?"}, // border 
        {"label":"Winner 28", "value":1, "question":"What character symbol is used at the end of each CSS statement?"},//semi-colon 
        {"label":"Winner 29", "value":1, "question":"By default, how wide is a <div> box?"}, //100% 
        {"label":"Winner 30", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"}, 
        {"label":"Winner 31", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"}     //comma 
     ]; 


     var svg = d3.select('#chart') 
      .append("svg") 
      .data([data]) 
      .attr("width", w + padding.left + padding.right) 
      .attr("height", h + padding.top + padding.bottom); 

     var container = svg.append("g") 
      .attr("class", "chartholder") 
      .attr("transform", "translate(" + (w/2 + padding.left) + "," + (h/2 + padding.top) + ")"); 

     var vis = container 
      .append("g"); 

     var pie = d3.layout.pie().sort(null).value(function(d){return 1;}); 

     // declare an arc generator function 
     var arc = d3.svg.arc().outerRadius(r); 

     // select paths, use arc generator to draw 
     var arcs = vis.selectAll("g.slice") 
      .data(pie) 
      .enter() 
      .append("g") 
      .attr("class", "slice"); 


     arcs.append("path") 
      .attr("fill", function(d, i){ return color(i); }) 
      .attr("d", function (d) { return arc(d); }); 

     // add the text 
     arcs.append("text").attr("transform", function(d){ 
       d.innerRadius = 0; 
       d.outerRadius = r; 
       d.angle = (d.startAngle + d.endAngle)/2; 
       return "rotate(" + (d.angle * 180/Math.PI - 90) + ")translate(" + (d.outerRadius -10) +")"; 
      }) 
      .attr("text-anchor", "end") 
      .text(function(d, i) { 
       return data[i].label; 
      }); 

     container.on("click", spin); 


     function spin(d){ 

      container.on("click", null); 

      //all slices have been seen, all done 
      console.log("OldPick: " + oldpick.length, "Data length: " + data.length); 
      if(oldpick.length == data.length){ 
       console.log("done"); 
       container.on("click", null); 
       return; 
      } 

      var ps  = 360/data.length, 
       pieslice = Math.round(1440/data.length), 
       rng  = Math.floor((Math.random() * 1440) + 360); 

      rotation = (Math.round(rng/ps) * ps); 

      picked = Math.round(data.length - (rotation % 360)/ps); 
      picked = picked >= data.length ? (picked % data.length) : picked; 


      if(oldpick.indexOf(picked) !== -1){ 
       d3.select(this).call(spin); 
       return; 
      } else { 
       oldpick.push(picked); 
      } 

      rotation += 90 - Math.round(ps/2); 

      vis.transition() 
       .duration(3000) 
       .attrTween("transform", rotTween) 
       .each("end", function(){ 

        //mark question as seen 
        d3.select(".slice:nth-child(" + (picked + 1) + ") path") 
         .attr("fill", "#111"); 

        //populate question 
        d3.select("#question h1") 
         .text(data[picked].question); 

        oldrotation = rotation; 

        container.on("click", spin); 
       }); 
     } 

     //make arrow 
     svg.append("g") 
      .attr("transform", "translate(" + (w + padding.left + padding.right) + "," + ((h/2)+padding.top) + ")") 
      .append("path") 
      .attr("d", "M-" + (r*.15) + ",0L0," + (r*.05) + "L0,-" + (r*.05) + "Z") 
      .style({"fill":"black"}); 

     //draw spin circle 
     container.append("circle") 
      .attr("cx", 0) 
      .attr("cy", 0) 
      .attr("r", 60) 
      .style({"fill":"white","cursor":"pointer"}); 

     //spin text 
     container.append("text") 
      .attr("x", 0) 
      .attr("y", 15) 
      .attr("text-anchor", "middle") 
      .text("SPIN") 
      .style({"font-weight":"bold", "font-size":"30px"}); 


     function rotTween(to) { 
      var i = d3.interpolate(oldrotation % 360, rotation); 
      return function(t) { 
      return "rotate(" + i(t) + ")"; 
      }; 
     } 


     function getRandomNumbers(){ 
      var array = new Uint16Array(1000); 
      var scale = d3.scale.linear().range([360, 1440]).domain([0, 100000]); 

      if(window.hasOwnProperty("crypto") && typeof window.crypto.getRandomValues === "function"){ 
       window.crypto.getRandomValues(array); 
       console.log("works"); 
      } else { 
       //no support for crypto, get crappy random numbers 
       for(var i=0; i < 1000; i++){ 
        array[i] = Math.floor(Math.random() * 100000) + 1; 
       } 
      } 

      return array; 
     } 

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

出典

2017-01-06 eagle eagle

スタックオーバーフローはアドバイスフォーラムではありません。あなたがオーディオを稼働させようとしたことをお見せしてください。 – Soviut

文書ソース全体を貼り付けるために下書きする – LuudJacobs

あなたは

var audio = new Audio('audio_file.mp3'); 
// wheel is spinning 
audio.play(); 
// wheel is not spinning 
audio.stop();

HTMLAudioElement DOMを触れることなく、直接JSを使用することができますnativelly JSオーディオファイルから制御することができます。このようなあなたのaudioのソースに

https://howlerjs.com/

出典

2017-01-06 10:01:26 GibboK

あなたの専門知識のアドバイスに感謝します。 –

@eagleeagle私の答えがあなたの質問にあなたを助けてくれることを願っています。便利だと分かった場合は、それを受け入れるか、左側にある「ダニ」または上向きの矢印をクリックして投票してください。ありがとう。 – GibboK

@Gibook、ありがとうございました。最後のコードは： //ホイールが回転していません audio.stop（）; 私はaudio.pause（）;を入れなければなりません。それ以外の場合、ホイールは1回だけ動作します –

セットアップaudioタグを：

代替では、として、いくつかのJSライブラリを使用することができます。

<audio controls loop> 
    <source src="/path/to/music.mp3" type="audio/mpeg"> 
</audio>

次に、スクリプトにこれを最初に追加します。

var audioElement = document.getElementById('audio'); 
audioElement.pause();

スピンが開始されたときにオーディオを再生。

function spin(d) { 
    audioElement.play(); 
    //.... 
}

スピンが停止したとき、最後に一時停止します。

vis.trainsition()... 
.each("end",function() { 
    //,.... 
    audioElement.pause(); 
});

オーディオタグhereについては、こちらをご覧ください。

出典

2017-01-06 10:04:45

アドバイスをいただきありがとうございます。にはまだいくつかの問題があり、これを修正しようとしています。 –

htmlで音声を追加

答えて

関連する問題