将鼠标悬停在特定对象上时播放声音文件

Question

谁能理解我做错了什么？此代码 returns 错误“songs is not a function”。

<div id="song1" class="song">
    <p>some text</p>
</div>
<div id="song2" class="song">
    <p>some text</p>
</div>
<div id="song3" class="song">
    <p>some text</p>
</div>

const songs = {
    song1: '/media/title-song-lala.mp3',
    song2: '/media/pva.mp3',
    song3: '/media/zjklf.mp3'
};

$('.song').hover(function() {
    let song = songs(this.id);
    createjs.Sound.play(song);
});

此致，芥末的形状

Answer 1

问题在于您如何访问 object

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

必须通过以下方式访问对象属性 songs.song1，或 songs['song1']，后者在属性的第一个字符是数字的情况下很有用你不能做 songs.1song，所以你必须像 songs['1song'] 那样做 - 当你想要获取的属性名称是一个变量时，它也很有用。

const songs = {
    song1: '/media/title-song-lala.mp3',
    song2: '/media/pva.mp3',
    song3: '/media/zjklf.mp3'
};

console.log(songs['song1']);

$('.song').hover(function() {
    let id = this.id;
    console.log(songs[id]);
    var audio = new Audio(songs[id]);
    audio.play();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="song1" class="song">
    <p>some text</p>
</div>
<div id="song2" class="song">
    <p>some text</p>
</div>
<div id="song3" class="song">
    <p>some text</p>
</div>

Answer 2

抱歉，我对对象语法错误感到不满意。它应该是 songs.key 而不是 songs(key).
代码仍然无效。我没有收到任何错误，但没有播放音频。

const songs = {
    song1: '/media/title-song-lala.mp3',
    song2: '/media/pva.mp3',
    song3: '/media/zjklf.mp3'
};

$('.song').hover(function() {
    let id = this.id
    var audio = new Audio(songs.id);
    audio.play();
});

<div id="song1" class="song">
    <p>some text</p>
</div>
<div id="song2" class="song">
    <p>some text</p>
</div>
<div id="song3" class="song">
    <p>some text</p>
</div>

将鼠标悬停在特定对象上时播放声音文件

Playing soundfile when hovering over specific object

javascript

html

jquery

createjs

playsound