在按钮onclick上更改glyphicon

大安11

我想要的是一个基本的播放按钮,它可以onclick播放音频文件,并将其外观从glyphicon-play更改为glyphicon-pause。进一步单击将暂停音频并返回到play-glyphicon。

我所拥有的是一个脚本,该脚本可让我播放和暂停音频文件,这些音频文件是通过按钮触发的。
缺少的是我的按钮中的切换glyphicon。

function EvalSound(soundobj) {
    var thissound = document.getElementById(soundobj);
    if (thissound.paused) {
      thissound.play();
    } else {
      thissound.pause();
    }
  }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<audio id="SDJTrack1" preload="none" source src='http://www.salon-du-jazz.de/mp3/La_Version_del_Trabajo_Hoerprobe.mp3' type='audio/mpeg'>
</audio>

<audio id="SDJTrack2" preload="none" source src='http://www.salon-du-jazz.de/mp3/No_Matter_Hoerprobe.mp3' type='audio/mpeg'>
</audio>

<button type="button" class="btn btn-default btn-lg" onClick="EvalSound('SDJTrack1')"><span class="glyphicon glyphicon-play"></span>
</button>1. Song

<button type="button" class="btn btn-default btn-lg" onClick="EvalSound('SDJTrack2')"><span class="glyphicon glyphicon-play"></span>
</button>2. Song

我已经找到了几种解决方案,例如:https : //stackoverflow.com/a/24901840/5325923但是我想在我的站点上添加大约20个音频文件,并且这些解决方案似乎只能在第一个按钮上或在所有按钮上使用同时。处理此问题的最佳方法是什么?太感谢了!

阿什拉夫·普尔诺(Ashraf Purno)

改变你htmljs像以下

function EvalSound(soundobj, button) {
    var thissound = document.getElementById(soundobj);
    if (thissound.paused) {
      thissound.play();
      $(button).find(".glyphicon").removeClass("glyphicon-pause").addClass("glyphicon-play");
    } else {
      thissound.pause();
      $(button).find(".glyphicon").removeClass("glyphicon-play").addClass("glyphicon-pause");
    }
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<audio id="SDJTrack1" preload="none" source src='http://www.salon-du-jazz.de/mp3/La_Version_del_Trabajo_Hoerprobe.mp3' type='audio/mpeg'>
</audio>

<audio id="SDJTrack2" preload="none" source src='http://www.salon-du-jazz.de/mp3/No_Matter_Hoerprobe.mp3' type='audio/mpeg'>
</audio>

<button type="button" class="btn btn-default btn-lg" onClick="EvalSound('SDJTrack1', this)"><span class="glyphicon glyphicon-play"></span>
</button>1. Song

<button type="button" class="btn btn-default btn-lg" onClick="EvalSound('SDJTrack2', this)"><span class="glyphicon glyphicon-play"></span>
</button>2. Song

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在按钮上更改鼠标光标?

来自分类Dev

在按钮的样式上设置背景色时,它会更改边距

来自分类Dev

在按钮上隐藏div

来自分类Dev

使用jQuery onclick功能在按钮上添加和删除活动的类

来自分类Dev

在按钮内更改椭圆填充颜色

来自分类Dev

在按钮悬停时更改glyphicon的颜色

来自分类Dev

将鼠标悬停在按钮上时,按钮颜色不会更改

来自分类Dev

UIAlertController在按钮上单击

来自分类Dev

数据在按钮onClick事件上更新两次

来自分类Dev

将鼠标悬停在按钮图像上时更改它们

来自分类Dev

如何将arraylist放在按钮onclick方法上?

来自分类Dev

更改事件以将焦点放在按钮上突然起作用

来自分类Dev

在按钮/链接的onclick上执行PHP代码?

来自分类Dev

在按钮上单击更改XML页面中的图像。

来自分类Dev

如何在按钮上单击ios更改UICollectionView的数据?

来自分类Dev

如何在按钮上更改鼠标光标?

来自分类Dev

WPF如何在鼠标悬停在按钮上时更改背景图像

来自分类Dev

如何在onclick按钮上更改div下的样式

来自分类Dev

在按钮样式上设置背景色时,它会更改边距

来自分类Dev

想要在按钮(imageview)onClick上实现类似Toast / Error弹出窗口的whatsapp

来自分类Dev

如何在按钮上单击将ListView更改为GridView

来自分类Dev

将鼠标悬停在按钮上时CSS更改跨度的颜色

来自分类Dev

UIAlertController在按钮上单击

来自分类Dev

React:组件仅在按钮的第二onClick上呈现新值

来自分类Dev

UWPCommunityToolkit DropShadowPanel在按钮上

来自分类Dev

Glyphicon 显示在按钮文本上方

来自分类Dev

在按钮上单击动态更改整个应用程序的主题并存储它

来自分类Dev

在按钮中编辑 onclick url

来自分类Dev

当使用 css 将鼠标悬停在按钮上时,如何更改按钮的文本?

Related 相关文章

  1. 1

    如何在按钮上更改鼠标光标?

  2. 2

    在按钮的样式上设置背景色时,它会更改边距

  3. 3

    在按钮上隐藏div

  4. 4

    使用jQuery onclick功能在按钮上添加和删除活动的类

  5. 5

    在按钮内更改椭圆填充颜色

  6. 6

    在按钮悬停时更改glyphicon的颜色

  7. 7

    将鼠标悬停在按钮上时,按钮颜色不会更改

  8. 8

    UIAlertController在按钮上单击

  9. 9

    数据在按钮onClick事件上更新两次

  10. 10

    将鼠标悬停在按钮图像上时更改它们

  11. 11

    如何将arraylist放在按钮onclick方法上?

  12. 12

    更改事件以将焦点放在按钮上突然起作用

  13. 13

    在按钮/链接的onclick上执行PHP代码?

  14. 14

    在按钮上单击更改XML页面中的图像。

  15. 15

    如何在按钮上单击ios更改UICollectionView的数据?

  16. 16

    如何在按钮上更改鼠标光标?

  17. 17

    WPF如何在鼠标悬停在按钮上时更改背景图像

  18. 18

    如何在onclick按钮上更改div下的样式

  19. 19

    在按钮样式上设置背景色时,它会更改边距

  20. 20

    想要在按钮(imageview)onClick上实现类似Toast / Error弹出窗口的whatsapp

  21. 21

    如何在按钮上单击将ListView更改为GridView

  22. 22

    将鼠标悬停在按钮上时CSS更改跨度的颜色

  23. 23

    UIAlertController在按钮上单击

  24. 24

    React:组件仅在按钮的第二onClick上呈现新值

  25. 25

    UWPCommunityToolkit DropShadowPanel在按钮上

  26. 26

    Glyphicon 显示在按钮文本上方

  27. 27

    在按钮上单击动态更改整个应用程序的主题并存储它

  28. 28

    在按钮中编辑 onclick url

  29. 29

    当使用 css 将鼠标悬停在按钮上时,如何更改按钮的文本?

热门标签

归档