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

Question

经过一番谷歌搜索后，我发现这段代码可以选择当前播放的音频:

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

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

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

实际上，我只想用一个 slider (输入类型=范围)来控制每一种声音。

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>

Answer 1

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

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>