我的代码：https://jsfiddle.net/66opsn9b/1/
如何设置html5 OnClick以使用音频而不是视频？
我希望音频一个像视频一样工作：
<video src="http://hi5.1980s.fm/;" width="50" height="50" style="cursor: pointer;background-color:orange;" onclick="this.paused?this.play():this.pause();">
答案 0 :(得分：0)
HTML5音频标签
"require": {
"php": ">=5.5.9",
"laravel/framework": "5.2.*",
"laravel/socialite": "^2.0",
"laravelcollective/html": "5.2.*",
"greggilbert/recaptcha": "^2.1",
"bican/roles": "2.1.*",
"kodeine/laravel-acl": "~1.0@dev",
"nesbot/carbon": "^1.21",
"dansmith/laravel5-foundation": "0.3.*",
"codesleeve/laravel-stapler": "1.0.*"
},
定义声音内容
C:\laragon\www\wasamar Fri 07/08/2016 5:02:36.56
为媒体元素定义多个媒体资源，例如和
因此，您应该将代码更改为：
- Conclusion: remove laravel/framework v5.2.39
- Conclusion: don't install laravel/framework v5.2.39
- Conclusion: don't install laravel/framework v5.2.38
- Conclusion: don't install laravel/framework v5.2.37
- Conclusion: don't install laravel/framework v5.2.36
- Conclusion: don't install laravel/framework v5.2.35
- Conclusion: don't install laravel/framework v5.2.34
- Conclusion: don't install laravel/framework v5.2.33
- Conclusion: don't install laravel/framework v5.2.32
- Conclusion: don't install laravel/framework v5.2.31
- Conclusion: don't install laravel/framework v5.2.30
- Conclusion: don't install laravel/framework v5.2.29
- Conclusion: don't install laravel/framework v5.2.28
- Conclusion: don't install laravel/framework v5.2.27
- Conclusion: don't install laravel/framework v5.2.26
- Conclusion: don't install laravel/framework v5.2.25
- Conclusion: don't install laravel/framework v5.2.24
- Conclusion: don't install laravel/framework v5.2.23
- Conclusion: don't install laravel/framework v5.2.22
- Conclusion: don't install laravel/framework v5.2.21
- Conclusion: don't install laravel/framework v5.2.20
- Conclusion: don't install laravel/framework v5.2.19
- Conclusion: don't install laravel/framework v5.2.18
- Conclusion: don't install laravel/framework v5.2.17
- Conclusion: don't install laravel/framework v5.2.16
- Conclusion: don't install laravel/framework v5.2.15
- Conclusion: don't install laravel/framework v5.2.14
- Conclusion: don't install laravel/framework v5.2.13
- Conclusion: don't install laravel/framework v5.2.12
- Conclusion: don't install laravel/framework v5.2.11
- Conclusion: don't install laravel/framework v5.2.10
- Conclusion: don't install laravel/framework v5.2.9
- Conclusion: don't install laravel/framework v5.2.8
- Conclusion: don't install laravel/framework v5.2.7
- Conclusion: don't install laravel/framework v5.2.6
- Conclusion: don't install laravel/framework v5.2.5
- Conclusion: don't install laravel/framework v5.2.4
- Conclusion: don't install laravel/framework v5.2.3
- Installation request for dansmith/laravel5-foundation 0.3.* -> satisfiable by dansmith/laravel5-foundation[v0.3.0].
- Conclusion: don't install laravel/framework v5.2.2
- Conclusion: don't install laravel/framework v5.2.1
- dansmith/laravel5-foundation v0.3.0 requires illuminate/pagination 5.1.* -> satisfiable by illuminate/pagination[v5.1.1, v5.1.13, v5.
.16, v5.1.2, v5.1.20, v5.1.22, v5.1.25, v5.1.28, v5.1.30, v5.1.31, v5.1.6, v5.1.8].
- don't install illuminate/pagination v5.1.1|don't install laravel/framework v5.2.0
- don't install illuminate/pagination v5.1.13|don't install laravel/framework v5.2.0
- don't install illuminate/pagination v5.1.16|don't install laravel/framework v5.2.0
- don't install illuminate/pagination v5.1.2|don't install laravel/framework v5.2.0
- don't install illuminate/pagination v5.1.20|don't install laravel/framework v5.2.0
- don't install illuminate/pagination v5.1.22|don't install laravel/framework v5.2.0
- don't install illuminate/pagination v5.1.25|don't install laravel/framework v5.2.0
- don't install illuminate/pagination v5.1.28|don't install laravel/framework v5.2.0
- don't install illuminate/pagination v5.1.30|don't install laravel/framework v5.2.0
- don't install illuminate/pagination v5.1.31|don't install laravel/framework v5.2.0
- don't install illuminate/pagination v5.1.6|don't install laravel/framework v5.2.0
- don't install illuminate/pagination v5.1.8|don't install laravel/framework v5.2.0
- Installation request for laravel/framework 5.2.* -> satisfiable by laravel/framework[v5.2.0, v5.2.1, v5.2.10, v5.2.11, v5.2.12, v5.2.
3, v5.2.14, v5.2.15, v5.2.16, v5.2.17, v5.2.18, v5.2.19, v5.2.2, v5.2.20, v5.2.21, v5.2.22, v5.2.23, v5.2.24, v5.2.25, v5.2.26, v5.2.27, v5
2.28, v5.2.29, v5.2.3, v5.2.30, v5.2.31, v5.2.32, v5.2.33, v5.2.34, v5.2.35, v5.2.36, v5.2.37, v5.2.38, v5.2.39, v5.2.4, v5.2.5, v5.2.6, v5
2.7, v5.2.8, v5.2.9].
C:\laragon\www\wasamar Fri 07/08/2016 5:09:59.40
λ Your requirements could not be resolved to an installable set of packages.
答案 1 :(得分：0)
我实施了一个代码，我认为它可以满足您的要求
使用单键：
<html>
<head>
<title>Audio Streaming</title>
</head>
<body>
<input type="button" onclick="playPauseAudio()" value="Play" id="PlayButton" /><br>
<audio id="myAudio" style="Visibility:hidden">
<source src="http://hi5.1980s.fm/;">
</audio>
<script>
var audio = document.getElementById("myAudio");
var flg = true;
function playPauseAudio() {
if(flg == true) {
audio.play();
document.getElementById("PlayButton").value = "Pause";
flg = false;
} else {
audio.pause();
document.getElementById("PlayButton").value = "Play";
flg = true;
}
}
</script>
</body>
</body>
</html>
使用两个按钮：
<html>
<head>
<title>Audio Streaming</title>
</head>
<body>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button><br>
<audio id="myAudio" style="Visibility:hidden">
<source src="http://hi5.1980s.fm/;">
</audio>
<script>
var audio = document.getElementById("myAudio");
function playAudio() {
audio.play();
}
function pauseAudio() {
audio.pause();
}
</script>
</body>
</body>
</html>
答案 2 :(得分：0)
你的例子中唯一的区别是音频没有高度/宽度。加上这个：
audio {
width: 100px;
height: 20px;
display: block;
}
并点击播放。