Javascript 在html上添加音频
下面是运行“幸运之轮宾果”的HTML代码。 我想在车轮旋转时添加音频，如果没有旋转，音乐应该自动停止。 请就此提出建议 下面是HTML代码：Javascript 在html上添加音频,javascript,html,Javascript,Html,下面是运行“幸运之轮宾果”的HTML代码。 我想在车轮旋转时添加音频，如果没有旋转，音乐应该自动停止。 请就此提出建议 下面是HTML代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Wheel of Fortune Bingo</title> <style type="text/css"> text{
<!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>
幸运之轮宾果游戏
正文{
字体系列：Helvetica、Arial、无衬线字体；
字体大小：11px；
指针事件：无；
}
#图表{
位置：绝对位置；
宽度：500px；
高度：500px；
排名：0；
左：0；
}
#问题:{
位置：绝对位置；
宽度：400px；
高度：500px；
排名：0；
左：520像素；
}
#问题h1{
字体大小：50px；
字体大小：粗体；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
位置：绝对位置；
填充：0；
保证金：0；
最高：50%；
-webkit转换：翻译（0，-50%）；
转换：翻译（0，-50%）；
}
var padding={top:20，right:40，bottom:0，left:0}，
w=500-填充。左-填充。右，
h=500-padding.top-padding.bottom，
r=数学最小值（w，h）/2，
旋转=0，
oldrotation=0，
拾取=100000，
oldpick=[]，
颜色=d3.scale.category20（）//类别20c（）
//randomNumbers=getRandomNumbers（）；
//http://osric.com/bingo-card-generator/?title=HTML+还有+CSS+宾果&words=padding%2Cfont-family%2Ccolor%2Cfont-weight%2Cfont-size%2Cbackground%2Cbottom%2Csans-serif%2Cperiod%2C磅+符号%2C%EF%B9%A4ul%EF%B9%A5%2C%EF%B9%A4h1%EF%B9%A5%2Cmargin%2C%2C%3C++%3E%2C{++%2C%EF%B9%A4p%EF%a9%A5%2C%EF%B9%A4！DOCTYPE+html%EF%B9%A5%2cs%EF%B9%A4head%EF%B9%A5%2colon%2C%EF%B9%A4style%EF%B9%c2css%2CJavaScript%2Cborder&freespace=true&freespace=Web+Design+Master&freespace=false&width=5&number=35#结果
风险值数据=[
{“label”：“Winner 1”，“value”：1，“疑问”：“什么CSS属性用于指定内容与其边框之间的区域？”}，//填充
{“label”：“Winner 2”，“value”：1，“问题”：“用于更改字体的CSS属性是什么？”}，//字体系列
{“label”：“Winner 3”，“value”：1，“问题”：“用于更改文本颜色的CSS属性是什么？”}，//color
{“label”：“Winner 4”，“value”：1，“疑问”：“使用什么CSS属性更改文本的粗体？”}，//字体重量
{“label”：“Winner 5”，“value”：1，“疑问”：“用于更改文本大小的CSS属性是什么？”}，//字体大小
{“label”：“Winner 6”，“value”：1，“问题”：“用于更改框的背景色的CSS属性是什么？”}，//背景色
{“label”：“Winner 7”，“value”：1，“疑问”：“哪个单词用于指定位于另一个标记内的HTML标记？”}，//嵌套
{“label”：“Winner 8”，“value”：1，“疑问”：“框的哪一侧是：margin:1px 1px 1px；？”}，//底部
{“label”：“Winner 9”，“value”：1，“疑问”：“什么字体在字母末尾没有衬线？”}，//无衬线
{“label”：“Winner 10”，“value”：1，“question”：“对于CSS选择器，应该使用什么字符前缀来指定类？”}，//句号
{“label”：“Winner 11”，“value”：1，“question”：“对于CSS选择器，应该使用什么字符前缀来指定ID？”}，//磅符号
{“label”：“Winner 12”，“value”：1，“question”：“在HTML文档中，哪个标签包含人们看到的所有内容？”}//
{“label”：“Winner 13”，“value”：1，“question”：“在HTML文档中，哪个标记表示无序列表？”}，//
{“label”：“Winner 14”，“value”：1，“question”：“在HTML文档中，哪个标记表示文档最重要的标题？”}//
{“label”：“Winner 15”，“value”：1，“疑问”：“用于指定框外区域的CSS属性是什么？”}，//margin
{“label”：“Winner 16”，“value”：1，“疑问”：“HTML标记使用哪种类型的括号？”}，//<>
{“标签”：“获胜者17”，“值”：1，“问题”：“CSS规则使用哪种类型的括号？”}，//{}
{“label”：“Winner 18”，“value”：1，“疑问”：“哪个HTML标记用于指定段落？”}，//
{“标签”：“获胜者19”，“值”：1，“问题”：“HTML中的第一行代码应该始终是什么？”}//
{“label”：“Winner 20”，“value”：1，“疑问”：“哪个HTML标记包含页面的所有元数据标记？”}//
{“label”：“Winner 21”，“value”：1，“question”：“在CSS中，哪个字符将属性与值分开？”}，//冒号
{“label”：“Winner 22”，“value”：1，“疑问”：“哪个HTML标记包含所有CSS代码？”}，//
{“label”：“Winner 23”，“value”：1，“问题”：“您的网页应该使用什么文件扩展名？”}，//.html
{“label”：“Winner 24”，“value”：1，“疑问”：“哪种编码语言用于标记网页上的内容和结构？”}，//HTML
{“label”：“Winner 25”，“value”：1，“疑问”：“哪种编码语言用于指定网页的设计？”}，//CSS
{“label”：“Winner 26”，“value”：1，“问题”：“哪种编码语言用于向网页添加功能？”}，//JavaScript
{“label”：“Winner 27”，“value”：1，“疑问”：“什么CSS属性用于使框的边缘可见？”}，//border
{“label”：“Winner 28”，“value”：1，“疑问”：“每个CSS语句末尾使用的字符符号是什么？”}，//分号
{
var audio = new Audio('audio_file.mp3');
// wheel is spinning
audio.play();
// wheel is not spinning
audio.stop();
<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();
});