Lev*_*kon 27 html5 html5-audio
我觉得我在这里服用疯狂的药片,因为我无法弄清楚如何使用自定义控件呈现html 5音频标签.
到目前为止我有这个HTML,它没有问题:
<audio controls preload='none'><source src='the url to the audio' type='audio/wav' /></audio>
如何让它只显示播放按钮,也许在播放时,在其中显示暂停按钮.
从我读到的,
默认情况下,该元素不会公开任何类型的播放器控件.您可以使用普通的HTML,CSS和JavaScript创建自己的控件.该元素具有play()和pause()等方法以及名为currentTime的读/写属性.还有读/写音量和静音属性.所以你真的拥有构建自己的界面所需的一切.
如果您不想构建自己的界面,可以告诉浏览器显示一组内置控件.为此,只需在标记中包含controls属性即可.
但我找不到任何使用自定义控件的示例.你怎么得到播放按钮？
sdl*_*rhc 37
你像这样创建你的元素......
<audio id="yourAudio" preload='none'>
<source src='the url to the audio' type='audio/wav' />
</audio>
<a href="#" id="audioControl">play!</a>
并添加一些功能:
var yourAudio = document.getElementById('yourAudio'),
ctrl = document.getElementById('audioControl');
ctrl.onclick = function () {
// Update the Button
var pause = ctrl.innerHTML === 'pause!';
ctrl.innerHTML = pause ? 'play!' : 'pause!';
// Update the Audio
var method = pause ? 'pause' : 'play';
yourAudio[method]();
// Prevent Default Action
return false;
};
现在,按钮只是简单的文本("播放!"或"暂停!"),但你可以用CSS做任何你想做的事情.而不是设置innerHTML,设置className,你很高兴去!
小智 12
经过大量研究，我找到了一种消除和操作预定义控件的特定部分的简单方法。
像平常一样创建元素，如下所示：
<audio autoPlay>
<source src='audioUrl' type='audio/mpeg' />
</audio>
然后在 CSS 文件中写入以下内容：
/* Specifies the size of the audio container */
audio {
width: 115px;
height: 25px;
}
audio::-webkit-media-controls-panel {
-webkit-justify-content: center;
height: 25px;
}
/* Removes the timeline */
audio::-webkit-media-controls-timeline {
display: none !important;
}
/* Removes the time stamp */
audio::-webkit-media-controls-current-time-display {
display: none;
}
audio::-webkit-media-controls-time-remaining-display {
display: none;
}
使用此代码，您应该得到一个小而漂亮的容器，其中只有静音按钮、暂停/播放按钮和“下载文件”标签。
有关您可以修改的所有内容的概述，请查看此处。
以下代码还将删除静音和播放按钮：
/* Removes mute-button */
audio::-webkit-media-controls-mute-button {
display: none;
}
/* Removes play-button */
audio::-webkit-media-controls-play-button {
display: none;
}
我一直在尝试使用图形而不是播放器.将'audio'标签中的样式设置为"display:none; width:0px; height:0px;" (显示无在iPad上不起作用,因此附加宽度-0和高度-0设置).也不包括"controls"属性应该工作.(不同的系统/浏览器和桌面与iOS都采取不同的行为.....)
例如:
<head>
<script>
function EvalSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.play();
}
</script>
</head>
<body>
Click the speaker to hear the sound. <a href="javascript:null()" onClick="EvalSound('sound1'); return false;">
<img src="sound_icon.png" alt="" title="sound_icon" width="" height="" class="" /></a>
<audio id="sound1" style="display: none; width: 0px; height: 0px;" src="sound.mp3" controls preload="auto" autobuffer>
</body>
"javascript:null()"在iPad上与"return false"结合使用 而不是通常的"#".
有关更多实用信息:http: //www.phon.ucl.ac.uk/home/mark/audio/play.htm
| 归档时间： |
|
| 查看次数： |
54965 次 |
| 最近记录： |