javascript - 为什么我无法使用 jquery 和 jquery ui 库播放此 mp3？

Question

出于某种原因，我无法获取我想要播放的 mp3 来使用此代码播放。这是 fiddle : http://jsfiddle.net/haGYL/

代码如下:

 <style>
 #player {
 width: 350px;
 height: 50px;    
 position: relative;
 margin: 0 auto;
 top: 150px;
 background: url('http://iviewsource.com/exercises/audioslider/images/volume-background.png') no-repeat left top;
 }

#volume {
position: absolute;
left: 24px;
margin: 0 auto;
height:15px;
width: 300px;
background: url('http://iviewsource.com/exercises/audioslider/images/volume-empty.png') no-repeat left top;
border: none;
outline: none;
}

#volume .ui-slider-range-min {
height:15px;
width: 300px;
position: absolute;
background: url('http://iviewsource.com/exercises/audioslider/images/volume-full.png') no-repeat left top;
  border: none;
 outline: none;
}

#volume .ui-slider-handle {
width: 38px;
height:39px;
background: url('http://iviewsource.com/exercises/audioslider/images/volume-knob.png') no-repeat left top;
position: absolute;
margin-left: -15px;
cursor: pointer;
outline: none;
border: none;
}

</style>
<script>
$("#volume").slider({
min: 0,
max: 100,
value: 0,
    range: "min",
    animate: true,
slide: function(event, ui) {
  setVolume((ui.value) / 100);
}
});

var myMedia = document.createElement('audio');
$('#player').append(myMedia);
myMedia.id = "myMedia";
playAudio('http://www.catholic.com/sites/default/files/audio/radioshows/ca140331b.mp3', 0);

function playAudio(fileName, myVolume) {
var mediaExt = (myMedia.canPlayType('audio/mp3')) ? '.mp3' 
: (myMedia.canPlayType('audio/ogg')) ? '.ogg' 
: '';
if (mediaExt) {
myMedia.src = fileName + mediaExt;
myMedia.setAttribute('loop', 'loop');
setVolume(myVolume);
myMedia.play();
}
}

function setVolume(myVolume) {
var myMedia = document.getElementById('myMedia');
myMedia.volume = myVolume;
}
</script>
<div id="player">
<div id="volume"></div>
</div>

Answer 1

观察代码的以下部分。

function playAudio(fileName, myVolume) {

  // here you are checking if player can mp3 or ogg file
  var mediaExt = (myMedia.canPlayType('audio/mp3')) ? '.mp3' 
    : (myMedia.canPlayType('audio/ogg')) ? '.ogg' 
    : '';
  if (mediaExt) {

    //here you are adding the extention that the player can play with the passed file url. So if url is www.xxx.com/myAudioFile and mediaExt is .mp3, here it will become www.xxx.com/myAudioFile.mp3
    myMedia.src = fileName + mediaExt;
    myMedia.setAttribute('loop', 'loop');
    setVolume(myVolume);
    myMedia.play();
  }
}

并且您将上述函数调用为

playAudio('http://www.catholic.com/sites/default/files/audio/radioshows/ca140331b.mp3', 0);

请注意，您还提供了扩展名。 因此，在执行 playAudio 方法时，有效文件 url 变得如下

http://www.catholic.com/sites/default/files/audio/radioshows/ca140331b.mp3.mp3
OR
http://www.catholic.com/sites/default/files/audio/radioshows/ca140331b.mp3.ogg

因此，要运行您的代码，您只需调用 playAudio 函数，如下所示

playAudio('http://www.catholic.com/sites/default/files/audio/radioshows/ca140331b', 0);

请注意，我没有传递扩展名。 请参阅下面的 JSFiddle。

Demo