jquery 通过 id 选择当前正在播放的音频

Posted 2023-02-25

【中文标题】jquery 通过 id 选择当前正在播放的音频

【英文标题】：jquery select current playing audio by id

【发布时间】：2018-08-06 11:51:22

【问题描述】：

经过一番谷歌搜索后，我找到了选择当前播放音频的代码：

document.getElementsByTagName('audio').addEventListener('playing',function()  myfunction(); ,false); 

但我想在上面的代码中添加选择播放音频的功能，如下所示：

document.getElementsByTagName('audio').addEventListener('playing',function()  myfunction( $(this).volume = 0.2 ); ,false); 

实际上，我只想用一个滑块（输入类型=范围）来控制每一种声音。

var max = 100,
  min = 0,
  step = 1,
  output = $('#output').text(max);
$("#range-slider")
  .attr(
    'max': max,
    'min': min,
    'step': step,
    'value': max
  )
  .on('input change', function() 
    output.text(this.value);
  );
  window.SetVolume = function(val)

    var player = document.getElementById('audi');
    console.log('Before: ' + player.volume);
    player.volume = val / 100;
    console.log('After: ' + player.volume);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
song is playing, please wait...
<audio id="audi" controls autoplay>
  <source src="http://picosong.com/cdn/fa4d593f627cc8e4a23e5608cb92945b.mp3" type="audio/mpeg">
</audio>
<br>
<input type="range" id="range-slider" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)">
<output id="output"></output>

【参考方案1】：

您的 mp3 网址不适合我。也许链接已过期？一旦我用一个有效的 URL 替换它，你的代码就可以工作了。移动滑块可调整音频元素的音量。

var max = 100,
  min = 0,
  step = 1,
  output = $('#output').text(max);
$("#range-slider")
  .attr(
    'max': max,
    'min': min,
    'step': step,
    'value': max
  )
  .on('input change', function() 
    output.text(this.value);
  );
  window.SetVolume = function(val)

    var player = document.getElementById('audi');
    console.log('Before: ' + player.volume);
    player.volume = val / 100;
    console.log('After: ' + player.volume);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
song is playing, please wait...
<audio id="audi" controls autoplay>
  <source src="https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3" type="audio/mpeg">
</audio>
<br>
<input type="range" id="range-slider" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)">
<output id="output"></output>